jQuery slider

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 pò 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 pusante next ❯ dovete inserire &#10095 separato dal ;.

Infine creiamo il menù di navigazione a pallini (dot o punti) che di solito và 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 crare 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.

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *