Creare uno slideshow con jQuery e aggiungervi un effetto di entrata è un processo che richiede solo alcuni passaggi. Lo slideshow che andremo a creare sarà ciclico, nel senso che una volta giunto all'ultima slide lo scorrimento ricomincerà dalla prima. Per far ciò useremo un semplice timer JavaScript che avrà il duplice compito di selezionare i valori di un array composto dagli offset delle slide (per far scorrere il contenitore) e ciascuna slide singolarmente usando il metodo eq(). Vediamo l'implementazione.
Per prima cosa la struttura HTML:
<div id="slider">
<div id="slider-wrapper">
<div class="slide">
<h3>Slide 1</h3>
<p class="text">Testo in entrata</p>
</div>
<!-- altre slide -->
</div>
</div>
Il paragrafo con classe text sarà quello che comparirà in entrata tramite un effetto di slide down. Il nostro CSS sarà quindi il seguente:
#slider {
width: 500px;
height: 400px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
#slider-wrapper {
width: 2500px;
height: 400px;
position: relative;
}
#slider-wrapper div.slide {
width: 500px;
height: 400px;
float: left;
background: #000;
color: #fff;
line-height: 400px;
text-align: center;
position: relative;
}
#slider-wrapper div.slide h3 {
display: inline;
}
#slider-wrapper div.slide p.text {
width: 100%;
height: 2em;
line-height: 2;
background: #d40;
position: absolute;
top: 0;
left: 0;
display: none;
}
Il nostro testo in entrata è stato prima posizionato in modo assoluto sulla parte superiore di ogni slide e quindi nascosto.
Con jQuery, la prima cosa da fare è creare una funzione di utility che restituisca un array contenente tutti gli offset (proprietà left) delle slide:
var getSlidePositions = function() {
var positions = [];
$('div.slide', '#slider-wrapper').each(function(i) {
var left = $(this).position().left;
positions[i] = left;
});
return positions;
};
A questo punto possiamo inizializzare il nostro contatore a zero e ottenere il numero di slide presenti nel set in modo da far ricominciare lo sliding quando il contatore raggiunge tale limite:
$(function() {
var len = $('div.slide', '#slider-wrapper').length;
var index = 0;
var offsets = getSlidePositions();
var interval = setInterval(function() {
index++;
if(index == len) {
index = 0;
}
var slide = $('div.slide', '#slider-wrapper').eq(index);
$('#slider-wrapper').animate({
left: - offsets[index]
}, 1000, function() {
slide.find('p.text').slideDown(800, function() {
$(this).slideUp();
});
});
}, 1800);
});
Il nostro contatore non solo ci serve come indice per muoverci tra i valori dell'array di offset ma anche per selezionare la slide corrente tramite il metodo eq(). Una volta selezionata la slide corrente andiamo a usare il metodo slideDown() sul testo in entrata contenuto nella slide e quindi lo nascondiamo tramite il metodo slideUp(). Notate come queste azioni avvengano nella funzione di callback del metodo animate() in modo da avere luogo esattamente dopo che l'effetto di scorrimento su ciascuna slide è stato completato.
Potete vedere l'esempio finale in questa pagina.