Slide show con caption utilizzando jQuery e il plug-in Cycle

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 that can also go on two lines of text as in this case

Caption of the second slide

Caption of the third slide

Caption of the forth slide

Caption of the fifth slide

Graphics elements of Fireworks

Sfondo caption trasparente.png

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;
         overflow: hidden;
      }
      
      .captionSlide {
         height: 40px;
         width: 392px;
         text-align: left;
         background-image: url(Immagini/sfondo_caption_trasparente.png);
         background-repeat: repeat;
         background-position: 0px 0px;
         top: -40px;
         position: relative;
         padding-top: 0px;
         padding-right: 4px;
         padding-bottom: 0px;
         padding-left: 4px;
         overflow: hidden;
      }

Code JavaScript

      $(document).ready(function() {
          $('#slideshow').cycle({
            fx:		'fade',	// Dissolvenza
            speed:    1000,	// Velocità dell'animazione
            timeout:  2000,	// 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
         });
      });

Code Html

<div id="slideshow">

	<div class="slide">
		<img src="Foto/slide_quadrata_01.jpg" />
      <div class="captionSlide">Caption of the first slide che può andare anche su due righe di testo come in questo caso</div>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_02.jpg" />
		<div class="captionSlide">Caption of the second slide</div>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_03.jpg" />
		<div class="captionSlide">Caption of the third slide</div>
	</div>
	<div class="slide">	
		<img src="Foto/slide_quadrata_04.jpg" />
		<div class="captionSlide">Caption of the forth slide</div>
	</div>
	<div class="slide">
		<img src="Foto/slide_quadrata_05.jpg" />
		<div class="captionSlide">Caption of the fifth slide</div>
	</div>

</div>