Slide show con pager completo 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;
      }
      
      
      #areanavslideshow {
         width:400px;
         margin-right: auto;
         margin-left: auto;
      }
      
      #navslideshow {
         width:280px;
         text-align:center;
         height: 25px;
         float: left;
      }
      
      #navslideshow a {
         display:inline-block;
         width:20px;
         margin-left:5px;
         color: #FFF;
         background-color: #CCC;
         height: 20px;
         text-decoration: none;
         padding-top: 3px;
         line-height: 18px;
         padding-right: 1px;
         padding-left: 1px;
      }
      
      #navslideshow a:hover {
         color: #FFF;
         background-color: #FC0;
      }
      
      #navslideshow a.activeSlide {
         color: #FFF;
         background-color: #F60;
      }
      
      .navslideshowicons {
         height: 25px;
         width: 60px;
         float: left;
      }
      
      #resetareanavslideshow {
         clear: both;
      }
      

      $('#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
         next:   '#nextslide',	// Pulsante per andare alla slide successiva
         prev:   '#prevslide'	// Pilsante per andare alla slide precedente
      });
      
      $('#pauseButton').click(function() { 
         $('#slideshow').cycle('pause'); 
      });
      
      $('#resumeButton').click(function() { 
         $('#slideshow').cycle('resume'); 
      });
      

<div id="slideshow">

	<div class="slide">
		<img src="Foto/slide_01.jpg" />
		<p>Caption della prima slide</p>
	</div>
	<div class="slide">
		<img src="Foto/slide_02.jpg" />
		<p>Caption della seconda 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 della quinta slide</p>
	</div>

</div>

<div id="areanavslideshow">
	<div class="navslideshowicons">
		<a id="prevslide" href="#"><img src="Immagini/freccia_prev.png" alt="Prev" width="25" height="25" hspace="0" vspace="0" border="0" /></a>
		<a id="nextslide" href="#"><img src="Immagini/freccia_next.png" alt="Next" width="25" height="25" hspace="0" vspace="0" border="0" /></a>
	</div>

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

	<div class="navslideshowicons">
		<a id="resumeButton" href="#"><img src="Immagini/resume_icon.png" alt="Resume" width="25" height="25" hspace="0" vspace="0" border="0" /></a>
		<a id="pauseButton" href="#"><img src="Immagini/pause_icon.png" alt="Pause" width="25" height="25" hspace="0" vspace="0" border="0" /></a>
	</div>
</div>

<div id="resetareanavslideshow"></div>