jQuery slider, creare uno slider di immagini in jQuery

In questo tutorial impareremo a creare un semplicissimo jQuery slider.

Realizzeremo questo slider utilizzando i metodi che abbiamo studiato in precedenza, ma più avanti vedremo altri metodi con cui poter realizzare uno slider in jQuery.

Quindi i metodi che ci serviranno per questo esempio sono: fadeIn(), fadeOut(), eq(), click(), addClass() e removeClass().

Esempio di utilizzo di jQuery slider

Potete vedere l’esempio seguendo il link: slider immagini con jQuery (ho messo un po’ di immagini della mia città, voi mettete pure le immagini che preferite).

Scegliete 5 immagini qualsiasi e salvatele nella cartella images, chiaramente il numero delle immagini può essere superiore o inferiore.

Codice html per lo slider

Cominciamo a costruire la nostra pagina web partendo dal codice html. Inseriamo un livello (div) a cui assegniamo una classe di nome container che conterrà le nostre immagini dello slider. Quindi inseriamo le immagini utilizzando il tag figure a cui assegniamo la classe imageslide.

Poi inseriamo le frecce per scorrere lo slide. Daremo, in seguito, una formattazione con il foglio di stile per visualizzare le frecce ai lati delle immagini. Attenzione per avere la freccia verso sinistra ❮, dunque il pulsante prev dovete inserire questo carattere speciale &#10094 seguito dal ; mentre per il carattere freccia destra ovvero il pulsante next ❯ dovete inserire &#10095 separato dal ;.

Infine creiamo il menù di navigazione a pallini (dot o punti) che di solito va in basso. Questo menù è utile perché agevola lo scorrimento delle immagini in maniera non sequenziale.

Ecco il codice html completo per creare il nostro semplicissimo jQuery slider.

<div class="container">
	<figure class="imageslide"><img src="images/modica.jpg"></figure>
	<figure class="imageslide"><img src="images/marzamemi.jpg"></figure>
	<figure class="imageslide"><img src="images/modica2.jpg"></figure>
	<figure class="imageslide"><img src="images/mare.jpg"></figure>
	<figure class="imageslide"><img src="images/stradina.jpg"></figure>
	<a class="prev">❮</a>
	<a class="next">❯</a>
</div>
<div class="pulsanti" style="text-align: center">
	<span class="dot" data-num='1'></span>
	<span class="dot" data-num='2'></span>
	<span class="dot" data-num='3'></span>
	<span class="dot" data-num='4'></span>
	<span class="dot" data-num='5'></span>
</div>

Adesso creiamo il foglio di stile esterno, a cui diamo ad esempio il nome di stile.css.

Quindi dobbiamo inserire il collegamento al foglio di stile, che andremo ad inserire, nella pagina html, magari prima della chiusura del tag head.

<link rel="stylesheet" type="text/css" href="style.css">

Codice CSS per lo slider

Dopo cominciamo a creare il foglio di stile, dando una formattazione adeguata.

Innanzitutto diamo margine 0 al body, in modo che le immagini risultino attaccate ai bordi.

Inoltre è importante impostare questa classe:

.imageslide{
display: none;
}

Altrimenti le immagini verrebbero visualizzate una sotto l’altra. Con questa proprietà le rendo invisibili e successivamente tramite il codice jQuery ne permetto la visualizzazione.

Infatti successivamente con $(‘.imageslide:first’).show(); mostro la prima immagine.

Le frecce prev e next sono posizionate a una distanza dall’alto del 35%, con larghezza automatica, dimensione del font di 60 pixel, di colore grigio e con una trasparenza (opacity 0.7). Inoltre facciamo in modo che quando siamo sulle frecce compare la manina del mouse impostando cursor: pointer.

Poi, per posizionare la freccia destra dò un margine di soli 4 pixel dal bordo destro.

Lo stesso discorso per il menù di navigazione a pallini (dot). Creiamo i pallini di altezza e larghezza 18 px, utilizziamo la proprietà border-radius: 50% per creare gli angoli arrotondati (altrimenti avremmo dei quadrati) e li coloriamo di grigio chiaro: #ccc.

Infine la classe grigio, a cui diamo un colore grigio scuro e una trasparenza, verrà applicata ai dot quando l’immagine relativa è selezionata.

Imposto anche le media queries per le diverse visualizzazioni.

body{
	margin: 0;
}

.imageslide{
	display: none;
}

figure { margin:0;}

img{
	width: 100%;
	height:auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  padding: 18px;
  color: #d2d2d2;
  font-size: 60px;
  opacity: 0.7;
}

.next {
  right: 4px;
}

.pulsanti{
	width: 100%;
	position: absolute;
	height:20px;
}

.dot{
	cursor:pointer;
	height: 18px;
	width: 18px;
	margin: 8px;
	background-color: #ccc;
	border-radius: 50%;
  	display: inline-block;
}
.grigio{
	background-color: #1c1818;
	opacity: 0.8;
}

@media (min-width: 768px) and (max-width: 1024px) {
.prev, .next {
  top: 20%;
  width: auto;
  font-size: 50px;
}

}

@media (min-width: 481px) and (max-width: 767px) {
.prev, .next {
  top: 10%;
  width: auto;
  font-size: 40px;
}
}

@media (max-width: 480px) {	
.prev, .next {
  top: 4%;
  width: auto;
  padding: 6px;
  font-size: 40px;
}

.dot{
	height: 12px;
	width: 12px;
	margin: 5px;
}
}

Codice jQuery

Adesso realizziamo lo script per il nostro jQuery slider.

Possiamo creare un file a parte, ad esempio di nome slider.js e poi nella pagina html lo inseriamo insieme alla libreria jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script src="slider.js"></script>

Come dicevamo con $(‘.imageslide:first’).show(); mostro la prima immagine.

Impostiamo una variabile current_img, che rappresenta l’indice delle nostre immagini, che parte da 0 e si ferma a 4, perché ho deciso di inserire 5 immagini.

Dopo selezioniamo il primo dei pallini (punti- dot) in basso e gli diamo un colore grigio scuro tramite il metodo addClass(): (‘.pulsanti>span:first’).addClass(‘grigio’);

Infatti il primo dot rappresenta la prima immagine.

Dopo costruiamo la navigazione dei pulsanti in basso, facendo in modo che quando si clicca su di un pallino l’immagine precedente si nasconde con il metodo hide() e quella selezionata compare con effetto dissolvenza grazie al metodo fadeIn().

Per selezionare l’indice corrente utilizzo il metodo eq().

Allo stesso modo ci costruiamo i pulsanti next e prev, facendo attenzione all’indice dell’immagine. Infatti, se l’indice è minore di 4 vado avanti nella sequenza, altrimenti lo riporto a 0.

Analogamente costruiamo il pulsante prev.

Ecco lo script completo.

$(document).ready(function(){
	$('.imageslide:first').show();
	var current_img=0;
	$('.pulsanti>span:first').addClass('grigio');
	
	$('.dot').click(function(){
		$('.dot').eq(current_img).removeClass('grigio');
		$(this).addClass("grigio");
		$('figure').eq(current_img).hide();
		current_img=+$(this).data('num')-1;
		$('figure').eq(current_img).fadeIn();
	});
	
	$('.next').click(function(){
		$('.imageslide').eq(current_img).hide();
		$('.dot').eq(current_img).removeClass('grigio');
		if(current_img<4)
			current_img++;
		else
			current_img=0;
		$('.imageslide').eq(current_img).fadeIn();
		$('.dot').eq(current_img).addClass('grigio');
	});
	
	$('.prev').click(function(){
		$('.imageslide').eq(current_img).hide();
		$('.dot').eq(current_img).removeClass('grigio');
		if(current_img>0)
			current_img--;
		else 
			current_img=4;
		$('.imageslide').eq(current_img).fadeIn();
		$('.dot').eq(current_img).addClass('grigio');
	});

});

Chiaramente questo è un esempio molto semplice di jQuery slider, più avanti vedremo altri esempi.

Lezione precedente: jQuery eq()