Creare uno slider di immagini personalizzato è uno degli esercizi più utili per chi desidera migliorare le proprie competenze in sviluppo front-end. Che si tratti di un portfolio, di un sito e-commerce o di un blog, uno slider ben progettato può aggiungere dinamismo e impatto visivo alla pagina, migliorando l'esperienza utente.
Slider di immagini personalizzato con HTML, CSS e JS
In questo tutorial ti guiderò passo dopo passo nella realizzazione di uno slider di immagini utilizzando solo HTML, CSS e JavaScript. Senza l'utilizzo di librerie esterne. Questo ti permetterà non solo di comprendere a fondo come funzionano gli elementi che compongono uno slider, ma anche di personalizzarlo in base alle tue esigenze. Alla fine dell'articolo avrai tra le mani uno slider perfettamente funzionante. Pronto per essere integrato in qualsiasi progetto web.
I linguaggi utilizzati: presentazione del progetto
In questo progetto utilizzeremo tre linguaggi fondamentali del front-end:
- HTML per la struttura portante dello slider, con immagini e pulsanti di navigazione.
- CSS
- JavaScript che renderà interattivo lo slider, permettendo all'utente di passare da un'immagine all'altra tramite i pulsanti o automaticamente dopo un intervallo di tempo.
L'obiettivo è quello di creare uno slider orizzontale semplice ma elegante
In particolare la struttura del risultato vedrà un rettangolo centrale con un'immagine a schermo intero, affiancata da una freccia a sinistra e una a destra. Al click su una di esse, l'immagine scorrerà in modo fluido, lasciando spazio alla successiva. Lo slider sarà anche responsive
Codice HTML, CSS e JS dello slider
Cominciamo definendo la struttura base dello slider. Il codice HTML seguente crea il contenitore principale con le immagini da scorrere e i pulsanti per la navigazione avanti e indietro. Sarà il punto di partenza su cui applicheremo gli stili CSS e la logica JavaScript.
Codice HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider di Immagini</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="slider-container">
<div class="slider">
<img src="url_foto_1" alt="Immagine 1" class="slide active">
<img src="url_foto_2" alt="Immagine 2" class="slide">
<img src="url_foto_3" alt="Immagine 3" class="slide">
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
</body>
</html>La struttura HTML è semplice e pulita. All'interno del body abbiamo un contenitore principale con classe .slider-container
- Un
div.slider.slide.active - Due pulsanti (
button.prev.next❮❯ - In alto carichiamo il file CSS esterno (
style.cssscript.js
Codice CSS
.slider-container {
position: relative;
width: 80%;
max-width: 800px;
overflow: hidden;
border-radius: 10px;
background-color: #000;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
height: 450px;
object-fit: cover;
display: none;
}
.slide.active {
display: block;
}
button.prev,
button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.7);
border: none;
padding: 10px;
font-size: 24px;
border-radius: 50%;
transition: background-color 0.3s;
}
button.prev:hover,
button.next:hover {
background-color: rgba(255, 255, 255, 0.9);
}
button.prev {
left: 10px;
}
button.next {
right: 10px;
}Con CSS abbiamo definito uno slider visivamente accattivante, centrato verticalmente e orizzontalmente nella pagina.
- Il body viene resettato e impostato con uno sfondo chiaro e una centratura con Flexbox.
- Il contenitore
.slider-container - Le immagini dentro
.sliderdisplay: flex.slide.active { display: block; } - Le frecce
.prev.next
In questo esempio, lo scorrimento sarà controllato via JavaScript, che cambierà l'immagine attiva rendendola visibile. Inoltre, potrai facilmente adattare dimensioni, colori o transizioni secondo il tuo stile.
Codice Javascript
const slides = document.querySelectorAll(".slide");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentIndex = 0;
function showSlide(index) {
slides.forEach((slide) => slide.classList.remove("active"));
slides[index].classList.add("active");
}
showSlide(currentIndex);
prevBtn.addEventListener("click", () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
});
nextBtn.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
});
setInterval(() => {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}, 5000);Questo script rende interattivo lo slider, con funzionalità sia manuali che automatiche:
- Usiamo
querySelectorAll - La funzione
showSlide(index) - Gli event listener su
prevnextcurrentIndex% - Infine,
setInterval
Risultato finale e conclusione
Il risultato ottenuto è uno slider di immagini fluido, responsivo e visivamente piacevole. L'utente può scorrere le immagini sia manualmente, utilizzando le frecce laterali, che automaticamente grazie al cambio slide programmato ogni 5 secondi. L'effetto di transizione è semplice ma efficace. L'interfaccia è pulita, adatta sia a un sito portfolio che a una homepage promozionale.
Uno degli aspetti più interessanti di questo esercizio è la capacità di ottenere un componente dinamico senza l'utilizzo di librerie o framework esterni, imparando a gestire la logica di visibilità, eventi e ciclicità delle immagini con puro JavaScript. Inoltre, il codice è facilmente estendibile: si possono aggiungere indicatori di slide (i classici "bullet"), animazioni più complesse o anche un supporto touch per dispositivi mobili.
Questo esercizio rappresenta un'ottima base per comprendere l'integrazione tra HTML, CSS e JavaScript in un progetto pratico. Lo slider può essere riutilizzato, personalizzato o potenziato in base alle esigenze del tuo sito ed è un ottimo modo per fare pratica con concetti fondamentali dello sviluppo front-end.
