Kent iemand hiervan de code of een vergelijkend iets?
http://www.cssplay.co.uk/menus/css3-image-slide.html
http://www.cssplay.co.uk/menus/css3-image-slide.html
Bekijk de onderstaande video om te zien hoe je onze site als een web app op je startscherm installeert.
Opmerking: Deze functie is mogelijk niet beschikbaar in sommige browsers.
<style type="text/css">
.slideOuter {width:498px; height:200px; overflow:hidden; margin:0 auto;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:800px; height:200px; overflow:hidden;}
.slideOuter .slide li {float:left;}
.slideOuter .slide li a {display:block; float:left; width:98px; border-right:2px solid #fff; height:200px; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide a#p5 {width:318px;}
.slideOuter .slide.current a {width:43px;}
.slideOuter .slide.current li a.current {width:318px;}
.slideOuter .slide li a img {border:0;}
.slideOuter .slide:hover a#p1,
.slideOuter .slide:hover a#p2,
.slideOuter .slide:hover a#p3,
.slideOuter .slide:hover a#p4 {width:43px;}
.slideOuter .slide a#p1:hover,
.slideOuter .slide a#p2:hover,
.slideOuter .slide a#p3:hover,
.slideOuter .slide a#p4:hover {width:318px;}
</style>
<h2>With no 'current' tab set</h2>
<div class="slideOuter">
<ul class="slide">
<li><a id="p1" href="#url1"><img src="image-slide/landscape.jpg" alt="" /></a></li>
<li><a id="p2" href="#url2"><img src="image-slide/portrait.jpg" alt="" /></a></li>
<li><a id="p3" href="#url3"><img src="image-slide/flower.jpg" alt="" /></a></li>
<li><a id="p4" href="#url4"><img src="image-slide/abstract.jpg" alt="" /></a></li>
<li><a id="p5" href="#url5"><img src="image-slide/seascape.jpg" alt="" /></a></li>
</ul>
</div>
<br /><br />
<h2>With a 'current' tab set</h2>
<div class="slideOuter">
<ul class="slide current">
<li><a id="p1" href="#url1"><img src="image-slide/landscape.jpg" alt="" /></a></li>
<li><a id="p2" class="current" href="#url2"><img src="image-slide/portrait.jpg" alt="" /></a></li>
<li><a id="p3" href="#url3"><img src="image-slide/flower.jpg" alt="" /></a></li>
<li><a id="p4" href="#url4"><img src="image-slide/abstract.jpg" alt="" /></a></li>
<li><a id="p5" href="#url5"><img src="image-slide/seascape.jpg" alt="" /></a></li>
</ul>
</div>
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.