Slide show con pager e bullets utilizzando jQuery e il plug-in Cycle

      #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;
      }
      
      
      #navslideshow {
         width: 400px;
         margin-right: auto;
         margin-left: auto;
         height: 20px;
         text-align: center;
      }
      
      #navslideshow a {
          display:inline-block;
          width: 20px;
          height: 20px;
          margin-right: 5px;
          background:url(Immagini/bullet_off.png) no-repeat;
      }
      
      #navslideshow a:hover {
          background:url(Immagini/bullet_hover.png) no-repeat;
      }
      
      #navslideshow a:last-child {
          margin-right: 0px;
      }
      
      #navslideshow a.activeSlide {
          background:url(Immagini/bullet_on.png) no-repeat;
      }
      

      $(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
            pager:	'#navslideshow',	// Crea la lista dei link per passare da una slide all'altra
            pagerAnchorBuilder: function(index, el) {
               return '';	// Rimuove il numero dal pager
            }
         });
      });
      

<div id="slideshow">

	<div class="slide">
		<img src="Foto/slide_01.jpg" />
		<p>Caption of the first slide</p>
	</div>
	<div class="slide">
		<img src="Foto/slide_02.jpg" />
		<p>Caption of the second slide</p>
	</div>
	<div class="slide">
		<img src="Foto/slide_03.jpg" />
	</div>
	<div class="slide">
		<img src="Foto/slide_04.jpg" />
	</div>
	<div class="slide">
		<img src="Foto/slide_05.jpg" />
		<p>Caption of the fifth slide</p>
	</div>
</div>

<div id="navslideshow"></div>