jQuery: slideshow verticale

I princìpi alla base di uno slideshow verticale realizzato con jQuery sono identici a quelli di uno slideshow orizzontale. A livello CSS, il contenitore più interno delle slide dovrà avere un'altezza pari alla somma delle altezze di tutte le slide e il contenitore più esterno dovrà avere la proprietà overflow impostata su hidden per visualizzare una slide alla volta. Con jQuery avremo bisogno questa volta di ottenere l'offset superiore di ciascuna slide tramite l'oggetto position(). Vediamo insieme i dettagli.

Partiamo da questa struttura HTML:


<div id="slider">

	<div id="slide-wrapper">
	
		<div class="slide"></div>
		
		<!-- altre slide -->
	</div>
</div>
<div id="slider-controls">

	<a href="#" id="prev">Precedente</a>
	<a href="#" id="next">Successiva</a>

</div>

Gli stili CSS saranno i seguenti:


#slider {
	width: 400px;
	margin: 0 auto;
	overflow: hidden;
	height: 300px;
}

#slide-wrapper {
	width: 100%;
	height: 1500px;
	position: relative;
}

div.slide {
	width: 100%;
	height: 300px;
	background: #000;
	color: #fff;
}

div.slide h2 {
	background: #d34545;
	margin: 0;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
}

div.slide p {
	width: 80%;
	margin: 0 auto;
	padding: 0.5em 0 1em 0;
	line-height: 1.3;
}

#slider-controls {
	width: 105px;
	margin: 0.5em auto;
	height: 50px;
}

#slider-controls a {
	display: block;
	width: 50px;
	height: 50px;
	text-indent: -1000em;
}

#slider-controls #prev {
	background: url(prev.png) no-repeat;
	float: left;
}

#slider-controls #next {
	background: url(next.png) no-repeat;
	float: right;
}

Con jQuery dobbiamo:

  1. ottenere un array contenente tutti gli offset superiori delle slide
  2. inizializzare un contatore da usare come indice per l'array
  3. incrementare il contatore sul pulsante di avanzamento e
    • verificare che il contatore non abbia superato la lunghezza del set di slide (in questo caso il pulsante va nascosto)
    • mostrare il pulsante per tornare indietro quando il contatore è uguale o superiore a 1
  4. decrementare il contatore sul pulsante per tornare indietro e
    • nascondere questo pulsante se il contatore è uguale o minore di 0
    • impostare a 0 il contatore se quest'ultimo è uguale al numero di slide
    • mostrare il pulsante di avanzamento se il contatore è inferiore al numero di slide
  5. usare il contatore come indice per selezionare una posizione nell'array per far scorrere il contenitore delle slide usando il metodo animate().

Il codice è il seguente:


$(function() {

  var positions = [];
  var slideIndex = 0;
  
  var len = $('div.slide', '#slide-wrapper').length;

  $('div.slide', '#slide-wrapper').each(function(index) {
  
    var slide = index;
    var position = $(this).position().top;
    
    positions[slide] = position;
  
  
  });
  
  $('#prev', '#slider-controls').hide();
  
  
  
  $('#prev', '#slider-controls').click(function(event) {
  
    if(slideIndex > 0) {
    
      slideIndex--;
      
    } else {
    
      $(this).hide();
    
    
    }
    
    if(slideIndex == len) {
    
      slideIndex = 0;
    
    
    }
    
    if(slideIndex < len) {
    
      $(this).next().show();
    
    }
    
    
    
    $('#slide-wrapper').animate({
      top: - positions[slideIndex]
    }, 'slow');
   
    event.preventDefault();
  });
  
  
  
  $('#next', '#slider-controls').click(function(event) {
  
    
    
    slideIndex++;
    
    if(slideIndex == 1) {
    
      $(this).prev().show();
    
    }
    
    if(slideIndex == len) {
    
      $(this).hide();
    
    
    }    
    
    
    $('#slide-wrapper').animate({
      top: - positions[slideIndex]
    }, 'slow');
   
    event.preventDefault();
  });

  
  
});

Potete visionare l'esempio finale in questa pagina.

Torna su