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

Previous Next Back to list Close

Slide show with the plugin Cycle e jQuery

Characteristics of slide show:

  • continuous scrolling to the left of the slide without detachment
  • captions

 

Caption of the first slide

Caption of the second slide

Caption of the fifth slide

 

Code 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;
      }
      

Code 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
         });
      });
      

Code Html

<div id="slideshow">

	<div class="slide">
		<img src="Foto/slide_quadrata_01.jpg" />
		<p>Caption of the first slide</p>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_02.jpg" />
		<p>Caption of the second 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 of the fifth slide</p>
	</div>

</div>
		

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Cinquale - Italy
VAT 01027000452
Fiscal Code VRSMTT71R16F704B
Privacy and Cookies
Cookies Settings