Gli slideshow senza paginazione usano solo i bottoni "Precedente" e "Successivo". Questi bottoni servono per incrementare e decrementare un contatore interno. Il contatore non è altro che un indice numerico usato per selezionare le slide. Inizialmente è impostato su 0 e il suo funzionamento è identico a quello degli indici degli array.
Così cliccando una prima volta sul pulsante "Successivo" il contatore avrà il valore di 1 e selezioneremo la seconda slide (la numerazione negli array comincia da 0). Quindi cliccando sul pulsante "Precedente" il contatore avrà valore 0 e selezioneremo di nuovo la prima slide. E così via.
Con jQuery possiamo usare il metodo .eq() con il nostro contatore, ma in JavaScript l'approccio è diverso:
function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}
Slideshow.prototype = {
init: function() {
this.slides = this.el.querySelectorAll( ".slide" ); // Una NodeList è simile ad un array
//...
},
_slideTo: function( pointer ) {
var currentSlide = this.slides[pointer]; // Slide corrente
//...
}
};
Una NodeList usa gli indici come un vero array. Un altro modo è quello di usare i selettori CSS3:
Slideshow.prototype = {
init: function() {
//...
},
_slideTo: function( pointer ) {
var n = pointer + 1; // :nth-child() conta a partire da 1, non da 0
var currentSlide = this.el.querySelector( ".slide:nth-child(" + n + ")" ); // Slide corrente
//...
}
};
Il selettore :nth-child() conta a partire da 1 e non da 0, quindi dobbiamo incrementare il contatore di 1 o più semplicemente impostare il suo valore iniziale su 1 per selezionare le slide.
Una volta selezionata una slide la usiamo per far scorrere il contenitore interno da destra a sinistra. In jQuery usiamo il metodo .animate() con un valore negativo per la proprietà left del contenitore interno. Il valore negativo è ricavato dall'offset della slide selezionata.
In JavaScript non esiste un metodo nativo .animate(), quindi dobbiamo usare le transizioni CSS:
.slider-wrapper {
position: relative; // Richiesto
transition: left 500ms linear;
}
Quindi modifichiamo il valore della proprietà left usando l'oggetto style:
function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}
Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector( ".slider-wrapper" );
this.slides = this.el.querySelectorAll( ".slide" );
//...
},
_slideTo: function( pointer ) {
var currentSlide = this.slides[pointer];
this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px";
}
};
Ora dobbiamo legare un evento click a ciascun pulsante. In jQuery usiamo il metodo .on() mentre in JavaScript usiamo il metodo addEventListener().
Dobbiamo anche verificare che il nostro contatore non abbia raggiunto un valore specifico, ossia 0 per il pulsante "Precedente" e il numero totale di slide per il pulsante "Successivo". In entrambi i casi i pulsanti devono essere mostrati o nascosti ed il contatore resettato sul valore corretto.
function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}
Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector( ".slider-wrapper" );
this.slides = this.el.querySelectorAll( ".slide" );
this.previous = this.el.querySelector( ".slider-previous" );
this.next = this.el.querySelector( ".slider-next" );
this.index = 0;
this.total = this.slides.length;
this.actions();
},
_slideTo: function( pointer ) {
var currentSlide = this.slides[pointer];
this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px";
},
actions: function() {
var self = this;
self.next.addEventListener( "click", function() {
self.index++;
self.previous.style.display = "block";
if( self.index == self.total - 1 ) {
self.index = self.total - 1;
self.next.style.display = "none";
}
self._slideTo( self.index );
}, false);
self.previous.addEventListener( "click", function() {
self.index--;
self.next.style.display = "block";
if( self.index == 0 ) {
self.index = 0;
self.previous.style.display = "none";
}
self._slideTo( self.index );
}, false);
}
};