Slide show con effetto ScrollLeft continuo utilizzando jQuery e il plug-in Cycle

Precedente Successiva Torna all'elenco Chiudi

Slide show con il plugin Cycle e jQuery

Caratteristiche dello slide show:

  • scorrimento continuo verso sinistra delle slide senza stacco
  • captions

 

Caption della prima slide

Caption della seconda slide

Caption della quinta slide

 

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>
		

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Località Cinquale - Italy
P.IVA 01027000452
C.F. VRSMTT71R16F704B
Privacy e Cookies
Preferenze Cookie