jQuery: slider a tab

Uno slider a tab è uno slider che combina i pulsanti di controllo con un effetto progressivo di attivazione dei tab che corrispondono a ciascuna slide. L'attivazione viene resa possibile tramite una classe CSS che viene aggiunta al tab corrente. Per ottenere questo effetto con jQuery si deve utilizzare la funzione di callback del metodo animate(), che in questo caso viene utilizzato per l'effetto di scorrimento delle slide. Vediamo i dettagli.

Partiamo da questa struttura HTML:

<div id="slideshow">

	<ul id="navigation">
	
		<li class="active"><span>Slide 1</span></li>
		<li><span>Slide 2</span></li>
		<li><span>Slide 3</span></li>
		<li><span>Slide 4</span></li>
	
	</ul>
	
	<div id="slider-wrapper">
	
		<div class="slide">...</div>
		<div class="slide">...</div>
		<div class="slide">...</div>
		<div class="slide">...</div>
    </div>
</div>
<div id="controls">
	
		<a href="#" id="prev">&larr;</a>
		<a href="#" id="next">&rarr;</a>	
</div>

Il codice CSS richiesto dovrà assegnare al genitore delle slide una larghezza pari alla somma delle larghezze di tutte le slide. Dato che l'overflow del contenuto sarà nascosto nel contenitore principale, verrà mostrata solo una slide alla volta. Il posizionamento relativo specificato in tal senso serve unicamente ad evitare problemi nelle versioni di Internet Explorer inferiori alla 8:

#slideshow {
	width: 600px;
	position: relative; /* per IE8- */
	margin: 0 auto;
	overflow: hidden;
	clear: left;
}

#controls {
	margin: 5px auto;
	width: 600px;
	text-align: center;
}

#controls a {
	background: #d40;
	color: #fff;
	font-weight: bold;
	padding: 4px;
	text-decoration: none;
}

#controls #prev {
	border-radius: 5px 0 0 5px;
}

#controls #next {
	border-radius: 0 5px 5px 0;
}

#slideshow div.slide {
	width: 600px;
	float: left;
}

#slider-wrapper {
	width: 2400px;
	overflow: hidden;
	position: relative;
}

#slideshow div.slide h2 {
	margin: 0;
	padding: 5px;
	font-size: 1.5em;
	text-align: center;
	background: #d40;
	color: #fff;
	border-radius: 0 6px 6px 6px;
}

#slideshow div.slide p {
	line-height: 1.3;
}

#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 2em;
}

#navigation li {
	height: 100%;
	float: left;
	margin-right: 0.5em;
	line-height: 2;
	padding: 0 1em;
}

#navigation span {
	color: #d40;
	text-transform: uppercase;
	text-decoration: none;
}

#navigation li.active {
	background: #d40;
	border-radius: 6px 6px 0 0;
}

#navigation li.active span {
	color: #fff;
}

Al contrario, il posizionamento relativo specificato sul genitore delle slide serve a creare l'effetto di scorrimento. Con jQuery dobbiamo innanzitutto ottenere un array contenente l'offset sinistro di ciascuna slide. Questi valori saranno utilizzati per lo scorrimento:

var getSlidePositions = function() {

  var positions = [];
  
  $('div.slide', '#slider-wrapper').each(function(index) {
  
    var $slide = $(this);
    var left = $slide.position().left;
    
    positions[index] = left;
  
  
  });
  
  return positions;

};

Quindi va creato un contatore che andrà incrementato o decrementato a seconda del link di controllo utilizzato per lo scorrimento. Questo contatore sarà utilizzato come indice per accedere ai valori dell'array di posizioni.

$(function() {


  var positions = getSlidePositions();
  var slideIndex = 0;
  var slidesLength = $('div.slide', '#slider-wrapper').length;
  
  $('#prev', '#controls').click(function(event) {
  
    if(slideIndex > 0) {
    
    
           slideIndex--;
      
    } else {
    
    
          slideIndex = slidesLength;
          slideIndex--;
    
    
    }
    
 
    
    $('#slider-wrapper').animate({
      left: - positions[slideIndex]
    }, 'slow', function() {
    
      $('li', '#navigation').eq(slideIndex).
      addClass('active').
      siblings().
      removeClass('active');
    
    
    });
  
  
    event.preventDefault();
  });
  
  $('#next', '#controls').click(function(event) {
  
    slideIndex++;
    
    if(slideIndex == slidesLength) {
    
      slideIndex = 0;
    
    }
    
    $('#slider-wrapper').animate({
      left: - positions[slideIndex]
    }, 'slow', function() {
    
    
      $('li', '#navigation').eq(slideIndex).
       addClass('active').
      siblings().
      removeClass('active');
    

    
    
    });
  
  
    event.preventDefault();
  });




});

Ad ogni link viene anche associato un test di controllo per verificare che il contatore non sia superiore al limite stabilito dal numero di slide presenti. Quando l'effetto di scorrimento è completo, usiamo lo stesso contatore con il metodo eq() per selezionare il tab corrispondente nel contesto della funzione di callback del metodo animate(). Una volta selezionato il tab corrente, gli associamo la classe active e al contempo la rimuoviamo dagli altri tab, in modo che un solo tab per volta venga selezionato.

Potete visionare l'esempio finale in questa pagina.