jQuery: slideshow con indicatore di avanzamento

Uno slideshow con indicatore di avanzamento in jQuery è uno slideshow in cui a ogni movimento di scorrimento delle slide corrisponde una variazione nel layout di un elemento (o di più elementi) preposto a fungere da indicatore di avanzamento. Nel nostro esempio vedremo una serie di cerchi che da vuoti diventano pieni man mano che le slide avanzano o retrocedono. Questo effetto si ottiene semplicemente cambiando una classe CSS che specifica un'immagine di sfondo per l'elemento selezionato. Tale cambiamento dovrà avvenire all'interno della funzione di callback del metodo animate(), in modo da ottenere la sequenza di scorrimento più quella di avanzamento nell'indicatore. Vediamo l'implementazione.

La marcatura è la seguente:

<div id="slideshow">

   <div id="outer-wrapper">
   
      <div id="inner-wrapper">
      
        <img src="1.jpg" alt="" />
        <img src="2.jpg" alt="" />
        <img src="3.jpg" alt="" />
      
      </div>
   
   
   </div>


</div>
<ul id="progress">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<div id="controls">

	<a href="#" id="prev">Prec.</a>
	<a href="#" id="next">Succ.</a>

</div>

Abbiamo usato un contenitore in più per definire un'immagine di sfondo sull'intero slideshow. Il CSS è il seguente:

#slideshow {
	width: 600px;
	height: 358px;
	margin: 0 auto;
	background: url(slider_frame.png) no-repeat;
	position: relative;
}

#outer-wrapper {
	width: 500px;
	height: 300px;
	position: absolute;
	top: 22px;
	left: 50%;
	margin-left: -250px;
	overflow: hidden;
}

#inner-wrapper {
	width: 1500px;
	height: 300px;
	position: relative;
}

#inner-wrapper img {
	float: left;
	width: 500px;
	height: 300px;
}

#progress {
  	width: 51px;
  	height: 12px;
  	margin: 1em auto;
  	padding: 0;
  	list-style: none;
}

#progress li {
	width: 12px;
	height: 12px;
	float: left;
	margin-right: 5px;
	background: url(slider_button1.png) no-repeat;
	text-indent: -1000em;
}

#progress li.current {
	background: url(slider_button2.png) no-repeat;
}

#controls {
	width: 100px;
	height: 40px;
	margin: 1em auto;
	position: relative;
	left: 10px;
}

#controls a {
	float: left;
	width: 50px;
	height: 40px;
	text-indent: -1000em;
}

#prev {
	background: url(left_arrow.png) no-repeat;
}

#next {
	background: url(right_arrow.png) no-repeat;
}

La classe current applicata sulle voci di lista modificherà l'aspetto dei nostri indicatori.

Con jQuery dobbiamo creare una funzione per ottenere gli offset delle slide e un indice incrementale per accedere ai valori dell'array restituito da tale funzione. Associamo un evento click ai due pulsanti andando ad incrementare e decrementare l'indice a seconda del tipo di progressione. Ad ogni chiamata della funzione legata a ciascun evento, dobbiamo anche rimuovere tutte le classi current presenti in modo da avere solo la voce corrente selezionata:

$(function() {

  var index = -1;
  var images = $('img', '#inner-wrapper');
  var len = images.length;
  var wrapper = $('#inner-wrapper');
  var indicators = $('li', '#progress');
  var prev = $('#prev', '#controls');
  var next = $('#next', '#controls');
  
  var getSlidePositions = function() {
  
    var positions = [];
    
    images.each(function(i) {
    
      var left = $(this).position().left;
      positions[i] = left;
    
    
    });
  
    return positions;
  };
  
  var offsets = getSlidePositions();
  
  prev.click(function(event) {
  
    indicators.removeClass('current');
    
    index--;
    
    if(index == -1) {
    
      index = 0;
    
    
    }
    
    wrapper.animate({
      left: - offsets[index]
    }, 1000, function() {
    
      indicators.eq(index).addClass('current');
    
    });
  
  
    event.preventDefault();
  
  });
  
  
  next.click(function(event) {
  
    indicators.removeClass('current');
    
    index++;
    
    if(index == len) {
    
      index = 0;
    
    
    }
    
    wrapper.animate({
      left: - offsets[index]
    }, 1000, function() {
    
      indicators.eq(index).addClass('current');
    
    });
  
  
    event.preventDefault();
  
  });

  
  
  

});

Potete visionare l'esempio finale in questa pagina.