Slideshow senza titolo e pulsanti






Codice HTML

<div id="slider">
 <ul>
 <li><img src="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" alt="1" width="700" height="350" /></li>
 <li><img src="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto2.jpg" alt="2" width="700" height="400" /></li>
 <li><img src="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto3.jpg" alt="3" width="700" height="350" /></li>
 <li><img src="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto4.jpg" alt="4" width="700" height="350" /></li>
 <li><img src="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" alt="5" width="700" height="350" /></li>
 </ul>
</div>


Codice CSS

#slider{
 margin:0 10px;
 padding:0;
 float:left;
 width:100%;
 height:350px
}

#slider ul{ margin:0; padding:0; list-style:none; float:left; position:relative }

#slider ul li{ margin:0; padding:0; opacity:0; position:absolute; top:0; left:0; -o-animation-name:slides_animation; -o-animation-duration:25s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-delay: 0; -o-animation-play-state: running; -o-animation-fill-mode: forwards; -webkit-animation-name:slides_animation; -webkit-animation-duration:25s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name:slides_animation; -moz-animation-duration:25s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; animation-name:slides_animation; animation-duration:25s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; }

#slider ul li:nth-child(2){ -o-animation-delay:5s; -webkit-animation-delay:5s; -moz-animation-delay:5s; animation-delay:5s }

#slider ul li:nth-child(3){ -o-animation-delay:10s; -webkit-animation-delay:10s; -moz-animation-delay:10s;animation-delay:10s }

#slider ul li:nth-child(4){ -o-animation-delay:15s; -webkit-animation-delay:15s; -moz-animation-delay:15s; animation-delay:15s }

#slider ul li:nth-child(5){ -o-animation-delay:20s; -webkit-animation-delay:20s; -moz-animation-delay:20s; animation-delay:20s }

#slider ul li img{ display:inline-block }

@-o-keyframes slides_animation{ 0%{opacity:0;} 4%{opacity:1;} 16%{opacity:1;} 24%{opacity:0;} 100%{opacity:0;} } @-webkit-keyframes slides_animation{ 0%{opacity:0;} 4%{opacity:1;} 16%{opacity:1;} 24%{opacity:0;} 100%{opacity:0;} }

@-moz-keyframes slides_animation{ 0%{opacity:0;} 4%{opacity:1;} 16%{opacity:1;} 24%{opacity:0;} 100%{opacity:0;} }

@keyframes slides_animation{ 0%{opacity:0;} 4%{opacity:1;} 16%{opacity:1;} 24%{opacity:0;} 100%{opacity:0;} }