Slideshow JavaScript

In questa lezione sviluppiamo un semplice slideshow in JavaScript.

Gli slideshow di immagini sono un modo efficace ed accattivante per presentare visivamente un sito web. È superfluo quindi evidenziare che occorre selezionare foto di alta qualità, ben illuminate e nitide e di forte impatto visivo. L’obiettivo è quello di raccontare la storia attraverso le immagini, mantenendo coerenza e connessione tra di esse.

Slideshow in JavaScript

Lo slideshow che svilupperò avrà dei pulsanti ai lati per scorrere le immagini e i button sotto per selezionare l’immagine desiderata. Inoltre lo slideshow inizia in automatico ma non appena si clicca sui button lo slideshow si interrompe.

Provate adesso la versione realizzata scorrendo lo slideshow sotto:

Le stagioni

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Codice HTML

Realizziamo il codice HTML necessario per realizzare il nostro slideshow di immagini in JavaScript:

<div class="slider-container">
     <div class="slider">
          <div class="slide active"><img src="..." alt="Image 1"></div>
          <div class="slide"><img src="..." alt="Image 2"></div>
          <div class="slide"><img src="..." alt="Image 3"></div>
          <!-- Puoi aggiungere altre immagini-->
     </div>
     <button class="prev" id="prevSlide">&#10094;</button>
     <button class="next" id="nextSlide">&#10095;</button>
     <div class="dot-container" id="dots-container"></div>
</div>

Il codice HTML, sopra descritto, crea un semplice slider di immagini con pulsanti di navigazione laterali e punti di navigazione.

Innanzitutto ho creato il contenitore principale, assegnando la classe “slider-container”, che racchiude tutte le componenti dello slider. Dopo, al’interno, ho inserito il div a cui ho assegato la classe “slider”, che contiene le singole slide, ciascuna contenente un’immagine ed i relativi testi alternativi sono incorporati nelle slide.

Poi ho inserito due pulsanti di navigazione, uno per passare all’immagine precedente e l’altro per passare all’immagine successiva, che ho posizionato sopra le slide. Infine, un div con la classe “dot-container” fornisce una barra di punti di navigazione posta sotto le immagini, riflettendo il numero di slide disponibili. L’HTML fornisce la struttura di base su cui verranno implementati gli stili CSS e gli script JavaScript per rendere lo slider completamente funzionale e visivamente accattivante.

Codice CSS del nostro Slideshow JavaScript

Ecco il codice CSS che ho realizzato per sviluppare l’esempio:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    height: 600px;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    display: none;
}

.slide.active {
    display: block;
}

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

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5); /* Sfondo semi-trasparente */
    border: none;
    font-size: 24px;
    cursor: pointer;
    outline: none;
    color: #333; 
    padding: 10px; 
    border-radius: 5px;
    transition: background 0.3s ease;
}

button:hover {
    background: rgba(255, 255, 255, 0.8); /* Sfondo più chiaro al passaggio del mouse */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.dot-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #bbb;
    margin: 0 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dot:hover,
.dot.active {
    background-color: #3498db;
}

Ho creato uno stile CSS pulito, semplice e moderno per rappresentare lo slider di immagini.

Il corpo della pagina è strutturato con il font di base Arial, senza margini o padding, allo scopo di garantire una base uniforme. Il contenitore principale dello slider (slider-container) occupa l’intera larghezza della pagina, nascondendo eventuali overflow per mantenere un layout coerente.

Per quanto riguarda il contenitore delle slide (slider), si fa uso del display flessibile per allineare orizzontalmente le immagini. Ogni slide (slide) è minimamente larga al 100%, garantendo così di occupare l’intero spazio disponibile.

Le immagini all’interno delle slide sono dimensionate in modo da adattarsi alla larghezza del loro contenitore, assicurando un aspetto uniforme e responsivo. Posizionati ai lati dello slider, i pulsanti di navigazione (prev e next) presentano uno sfondo semitrasparente che si schiarisce al passaggio del mouse.

Inoltre, i punti di navigazione sono visualizzati in una barra sotto lo slider, con uno sfondo grigio chiaro che si illumina al passaggio del mouse o quando il punto corrispondente è attivo. Infine ho inserito transizioni e animazioni per dare un aspetto fluido e moderno al cambio delle slide e all’interazione con i pulsanti e i punti di navigazione.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Codice JavaScript

Concludiamo la realizzazione del nostro Slideshow JavaScript inserendo le funzioni e la gestione degli eventi necessari. Ecco come si potrebbe sviluppare il codice:

let currentIndex = 0;
let autoSlideInterval;

let slides = document.querySelectorAll('.slide');
const prev = document.getElementById('prevSlide');
prev.addEventListener('click', prevSlide)

const next = document.getElementById('nextSlide');
next.addEventListener('click', nextSlide)

startAutoSlide(); // Avvia lo scorrimento automatico all'avvio

function showSlide(index) {            
const dots = document.querySelectorAll('.dot');

  if (index < 0) {
         index = slides.length - 1;
    } else if (index >= slides.length) {
         index = 0;
    }

    currentIndex = index;

    slides.forEach((slide, i) => {
         slide.classList.toggle('active', i === index);
     });

     dots.forEach((dot, i) => {
          dot.classList.toggle('active', i === index);
       });
  }

function nextSlide() {
      stopAutoSlide();
      showSlide(currentIndex + 1);
 }

function prevSlide() {
       stopAutoSlide();
       showSlide(currentIndex - 1);
}

function startAutoSlide() {
      autoSlideInterval = setInterval(() => {
          nextSlide();
        }, 3000);
 }

function stopAutoSlide() {
       clearInterval(autoSlideInterval);
}

// Creazione dinamica dei punti di navigazione
      
const dotsContainer = document.getElementById('dots-container');

for (let i = 0; i < slides.length; i++) {
       const dot = document.createElement('span');
       dot.classList.add('dot');
       dot.addEventListener('click', () => {
             showSlide(i);
             stopAutoSlide();
       });
       dotsContainer.appendChild(dot);
 }

Innanzitutto inizializziamo le variabili:

currentIndex: che serve a memorizzare l’indice della slide corrente.
autoSlideInterval: che serve a memorizzare l’ID dell’intervallo per il passaggio automatico tra le slide. Inzialmente non diamo alcun valore.
slides: rappresenta tutte le slide che contengono le immagini del documento.
prev e next: rappresentano gli elementi HTML dei pulsanti “precedente” e “successivo”.ù

Dopo gestiamo gli eventi al click sui pulsanti next e prev utilizzando addEventListeners e creiamo le funzioni nextSlide e prevSlide che richiamano la funzione showSlide.

La funzione showSlide(index) è responsabile di mostrare la slide corrispondente all’indice passato come parametro. Inoltre gestisce il loop circolare, quindi se si raggiunge l’ultima slide e si preme “successivo”, tornerà alla prima slide e viceversa. Infine aggiorna le classi active per evidenziare la slide corrente e il pallino corrispondente.

Ho creato anche le funzioni startAutoSlide e stopAutoSlide:

startAutoSlide imposta un intervallo che chiama automaticamente nextSlide ogni 3000 millisecondi (3 secondi).
stopAutoSlide cancella l’intervallo per interrompere lo scorrimento automatico.

La chiamate iniziale è alla funzione startAutoSlide per avviare lo scorrimento automatico.

Inoltre ho creato dinamicamente anche i punti di navigazione corrispondenti alle slide. Ogni pallino ha un evento click associato che chiama la funzione showSlide con l’indice corrispondente e interrompe lo scorrimento automatico.

Conclusione

Nel corso di questa lezione, abbiamo creato un slideshow utilizzando JavaScript. È importante sottolineare che quanto sviluppato rappresenta soltanto una delle molteplici soluzioni possibili. Vi incoraggo a sperimentare e creare altre varianti dello slideshow per approfondire la comprensione e ampliare le vostre competenze nel linguaggio di programmazione.