In uno slideshow jQuery vorremmo poter combinare l'effetto di scorrimento sulle slide e un effetto di assolvenza sulla prima slide per evitare il fenomeno del rewind delle slide quando il ciclo ritorna al punto di partenza. Vediamo come fare.
Partiamo dalla seguente marcatura:
<div id="content-slider">
<div id="content-slider-wrapper">
<div class="slide"></div>
<div class="slide s2"></div>
<div class="slide s3"></div>
<div class="slide s4"></div>
</div>
</div>
Con i seguenti stili CSS:
#content-slider {
width: 600px;
height: 400px;
border: 1em solid #aaa;
position: relative;
overflow: hidden;
margin: 2em auto;
}
#content-slider-wrapper {
width: 2400px;
height: 400px;
position: relative;
background: #f2f2f2;
}
div.slide {
float: left;
width: 600px;
height: 400px;
position: relative;
background: #f2f2f2;
}
div.slide * {
font-family: Palatino, Georgia, serif;
margin: 0;
padding: 0 50px;
}
div.slide h2 {
font-weight: normal;
font-size: 2em;
padding-bottom: 5px;
padding-top: 50px;
}
div.slide p {
line-height: 1.3;
}
div.s2 {
background: #000;
color: #fff;
}
div.s3 {
background: #a30;
color: #fff;
}
div.s4 {
background: #c60;
color: #fff;
}
Possiamo notare come ciascuna slide sia posizionata in modo relativo. Quindi possiamo usare il metodo position() per far scorrere le slide. Usando un indice progressivo all'interno di un timer JavaScript possiamo selezionare le varie slide utilizzando il metodo eq().
Quando l'indice raggiunge la lunghezza (length) del set di slide, lo resettiamo a zero. E così via. Ma per gestire la prima slide dobbiamo attendere che l'indice abbia valore 2 per poter intervenire.
In questo modo la nostra preparazione dell'effetto sulla prima slide verrà nascosto dallo scorrimento della terza slide. Quindi azzeriamo l'opacità dell'elemento e quando l'indice raggiungerà la lunghezza del set di slide riposizioneremo le altre slide usando i loro valori iniziali e faremo comparire la prima slide con un effetto di assolvenza.
Nota
jQuery assegna una prevalenza agli stili CSS assegnati tramite un metodo di animazione. Nel nostro caso non possiamo usare il metodo css() per azzerare l'opacità della prima slide, in quanto useremo il metodo animate() per l'effetto di assolvenza. In altre parole, se si imposta uno stile tramite un metodo di animazione, questo ha la precedenza sull'assegnazione tramite CSS. L'effetto finale (indesiderato) sarà che lo stile CSS rimarrà sempre uguale a quello definito con il metodo di animazione scelto.
Ecco il codice:
var ContentSlider = new function() {
var wrapper = document.getElementById('content-slider-wrapper'),
slides = $('div.slide', wrapper),
timer = null,
index = 0;
var _slide = function() {
timer = setInterval(function() {
index++;
if(index == 2) {
slides.eq(0).animate({opacity: 0}, 0);
}
if(index == slides.length) {
slides.not(':first').animate({
left: 0
}, 0, function() {
slides.eq(0).animate({
opacity: 1
}, 2000);
});
index = 0;
}
var slide = slides.eq(index);
slide.animate({
left: - slide.position().left
}, 2000);
}, 2000);
};
this.init = function() {
_slide();
};
}();
$(function() {
ContentSlider.init();
});
Ricordate inoltre che la durata complessiva delle animazioni dovrebbe essere sempre uguale all'intervallo impostato nel timer. In caso contrario si potrebbero verificare degli effetti imprevisti.
Potete visionare l'esempio finale in questa pagina.