Slide show con il plugin Cycle e jQuery
Caratteristiche dello slide show:
Codice CSS
#slideshow { width: 400px; height: 440px; overflow: hidden; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } .slide { width: 400px; height: 440px; text-align: center; }
Codice JavaScript
$(document).ready(function() { $('#slideshow').cycle({ fx: 'scrollLeft', // ScrollLeft speed: 2000, // Velocità dell'animazione timeout: 500, // Tempo di permanenza di una slide pause: 1, // Se 1 mette in pausa quando il mouse è sopra lo slide show, altrimenti 0 startingSlide: 0, // Parte dalla prima slide continuous: 0 // Avvia la prossima transizione appena finisce quella precedente }); });
Codice Html
<div id="slideshow"> <div class="slide"> <img src="Foto/slide_quadrata_01.jpg" /> <p>Caption della prima slide</p> </div> <div class="slide"> <img src="Foto/slide_quadrata_02.jpg" /> <p>Caption della seconda slide</p> </div> <div class="slide"> <img src="Foto/slide_quadrata_03.jpg" /> </div> <div class="slide"> <img src="Foto/slide_quadrata_04.jpg" /> </div> <div class="slide"> <img src="Foto/slide_quadrata_05.jpg" /> <p>Caption della quinta slide</p> </div> </div>