Slideshow senza titolo e pulsanti
Codice HTML
<div id="slider"> <ul> <li><img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" alt="1" width="700" height="350" /></li> <li><img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto2.jpg" alt="2" width="700" height="400" /></li> <li><img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto3.jpg" alt="3" width="700" height="350" /></li> <li><img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto4.jpg" alt="4" width="700" height="350" /></li> <li><img src="https://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;} }