Come creare uno slider di immagini con JavaScript per potenziare il tuo sito web ⋆ winadmin.it

Ti sei mai trovato in una situazione in cui desideri visualizzare più immagini/video su una sezione di una pagina web ma non vuoi occupare molto spazio? Vuoi aggiungere interattività alle tue pagine web o renderle più attraenti?

Un dispositivo di scorrimento dell’immagine può salvarti la fatica. In questo articolo definiremo un dispositivo di scorrimento dell’immagine, i prerequisiti per la creazione di un dispositivo di scorrimento dell’immagine e come crearne uno utilizzando HTML, JavaScript e CSS.

Sommario:

Che cos’è un cursore immagine?

Gli slider sono caroselli o presentazioni che visualizzano testi, immagini o video. Questo articolo si concentrerà sui cursori delle immagini. La maggior parte degli sviluppatori web utilizza i dispositivi di scorrimento sulla home page per mostrare le offerte o le informazioni più importanti.

Questi sono alcuni dei motivi per cui dovresti utilizzare gli slider nelle tue pagine web.

Migliora l’esperienza utente: una pagina Web ideale dovrebbe essere compatta in modo che gli utenti finali non debbano scorrere e scorrere per ottenere dati importanti. Se disponi di più immagini, puoi risparmiare agli utenti il fastidio di scorrere visualizzandole in un dispositivo di scorrimento.
Aspetto visivo: la maggior parte degli utenti di siti Web non trascorre molto tempo su una semplice pagina Web. Puoi migliorare l’aspetto visivo con cursori e animazioni.
Risparmia spazio: se hai circa 20 immagini che desideri visualizzare sulla tua pagina web, potrebbero occupare molto spazio. La creazione di uno slider ti consentirà di risparmiare spazio e consentire comunque agli utenti di accedervi tutti.
Visualizza contenuti dinamici: puoi utilizzare i dispositivi di scorrimento per visualizzare contenuti dinamici come incorporamenti di social media, blog e notizie.

Prerequisiti per la creazione di un cursore immagine

Una conoscenza di base dell’HTML: descriveremo qui la struttura dello slider. Dovresti essere a tuo agio nel lavorare con vari tag, classi e div HTML.
Una conoscenza di base dei CSS: useremo i CSS per dare uno stile ai cursori e ai pulsanti delle immagini.
Una conoscenza di base di JavaScript: useremo JavaScript per rendere reattivi i cursori delle immagini.
Un editor di codice: puoi usare il tuo editor di codice preferito. Userò il codice di Visual Studio.
Una raccolta di immagini.

Imposta la cartella del progetto

Abbiamo bisogno di una cartella di progetto, una cartella di immagini al suo interno e file HTML, CSS e JavaScript. Chiamerò il mio progetto “Image-Slider”. Puoi creare il tuo progetto manualmente o utilizzare questi comandi per iniziare;

mkdir Image-Slider

cd Image-Slider

mkdir Immagini && tocca index.html styles.css script.js

Aggiungi tutte le tue immagini alla cartella “Immagini” che abbiamo creato all’interno della cartella del progetto e vai al passaggio successivo.

Questa è la cartella del mio progetto, dove ho aggiunto sei immagini che userò per creare uno slider. Tutto il nostro codice HTML sarà nel file index.html.

Tipi di cursori immagine

Possiamo avere due tipi di cursori immagine; un dispositivo di scorrimento automatico e un dispositivo di scorrimento automatico dell’immagine con pulsanti.

#1. Dispositivo di scorrimento automatico dell’immagine

Un dispositivo di scorrimento automatico passa automaticamente all’immagine successiva dopo un determinato tempo, ad esempio, 3 secondi.

Codice HTML

Questo è il mio codice HTML;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>African</h1>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" >
    </div>
  </div>

  <script src="script.js"></script>


</body>
</html>

Da questo codice, possiamo notare quanto segue;

Ho importato il mio file CSS in index.html nella sezione . Questo verrà utilizzato nei passaggi successivi.

Ho aggiunto JavaScript al mio codice HTML appena prima del tag di chiusura . Userò JavaScript per aggiungere funzionalità ai cursori.
Ogni diapositiva ha una classe di diapositiva.
Ho usato il tag per importare immagini dalla cartella Immagini.

Dai uno stile al dispositivo di scorrimento automatico dell’immagine utilizzando i CSS

Ora possiamo modellare le nostre immagini poiché abbiamo già collegato i file CSS e HTML.

Aggiungi questo codice al tuo file CSS;

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

Da questo codice, possiamo notare quanto segue;

Abbiamo la larghezza e l’altezza del nostro cursore all’80%
Abbiamo impostato la diapositiva attiva su blocca, il che significa che solo la diapositiva attiva verrà visualizzata mentre il resto è nascosto.

Come aggiungere JavaScript per rendere reattivo il dispositivo di scorrimento dell’immagine

Aggiungi questo codice al tuo file script.js;

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className="slide";
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className="slide active";
}

Questo JavaScript fa quanto segue;

Utilizziamo il selettore document.querySelectorAll per scegliere come target tutti gli elementi con una classe diapositiva.
Diamo il valore iniziale di currentSlide 0.
Impostiamo slideInterval come 2000 (2 secondi), il che significa che le immagini nel dispositivo di scorrimento cambiano ogni 2 secondi.
Questo codice scorre[currentSlide].className = ‘diapositiva’; rimuove la classe attiva dalla diapositiva corrente
Questo codice currentSlide = (currentSlide + 1) % slides.length; incrementa l’indice della diapositiva corrente.
Questo codice scorre[currentSlide].className = ‘diapositiva attiva’; aggiunge la classe attiva alla diapositiva corrente.

Il dispositivo di scorrimento automatico funziona come segue;

#2. Cursore automatico con pulsanti

Il dispositivo di scorrimento dell’immagine che abbiamo creato scorre automaticamente ogni 2 secondi. Ora possiamo creare un’immagine in cui gli utenti possono passare alla diapositiva successiva facendo clic su un pulsante o scorrere automaticamente ogni 3 secondi se l’utente non fa clic sui pulsanti.

Codice HTML

Puoi modificare il contenuto del tuo file index.html come segue;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css" />
  </head>
  <body>
    <div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img5.jpg" style="width:100% ; height:50vh">
        </div>
      
      
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
          </div>
          
        </div>
      </div>

    <script src="script.js"></script>
  </body>
</html>

Questo codice HTML funziona come segue;

Abbiamo una classe chiamata mySlides che contiene le nostre cinque immagini.
Abbiamo due pulsanti, “prev” e “next” con un onClick, che consentono agli utenti di scorrere le diapositive.
Abbiamo una miniatura che mostra le immagini nella parte inferiore della pagina web.

Codice CSS

Aggiungi questo al tuo codice;

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Il codice CSS funziona come segue;

Abbiamo impostato la proprietà di visualizzazione della classe .mySlides come none, il che significa che tutte le diapositive sono nascoste per impostazione predefinita.
Abbiamo impostato l’opacità delle miniature su cui si passa il mouse su 1 tramite la regola attiva .demo:hover {opacity: 1;}.

Codice javascript

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Puoi ottenere il codice sorgente finale qui.

Il nostro codice JavaScript fa quanto segue;

Abbiamo una funzione currentSlide con un valore di visualizzazione impostato come none. Questa regola consente alla nostra pagina Web di visualizzare solo la diapositiva corrente.
Abbiamo una funzione plusSlides che aggiunge/sottrae il valore dato da slideIndex per determinare quale diapositiva visualizzare.
Se l’utente non fa clic sui pulsanti, le diapositive scorreranno automaticamente ogni 3000 millisecondi.

Se un utente utilizza la scheda di navigazione, il nostro dispositivo di scorrimento dell’immagine funzionerà come segue;

Se l’utente non utilizza i pulsanti di navigazione, il dispositivo di scorrimento dell’immagine scorrerà automaticamente ogni 3 secondi come segue;

Testare ed eseguire il debug del dispositivo di scorrimento dell’immagine

Errori ed errori fanno parte del viaggio di uno sviluppatore e averli nel tuo codice non significa che sei un cattivo sviluppatore. Se il tuo codice non funziona anche dopo aver seguito i passaggi sopra menzionati, puoi provare queste opzioni di test e debug per correggere gli errori:

Eseguire il debug di ogni file separatamente: il nostro codice ha tre file, file HTML, CSS e JavaScript. Le tre lingue hanno regole diverse. Puoi verificare se i tuoi codici HTML, CSS e JavaScript sono validi utilizzando strumenti come W3C Markup Validation Service for HTML, CSS Validator per il tuo codice CSS e Chrome DevTools per testare il tuo codice JavaScript.
Esegui diversi tipi di test: puoi eseguire test visivi per garantire che le immagini siano visualizzate correttamente, test delle prestazioni per verificare se le immagini sono reattive e test funzionali per garantire che le immagini siano navigabili.
Metti alla prova il tuo codice con diversi formati e dimensioni di immagine: un buon dispositivo di scorrimento delle immagini dovrebbe funzionare con diversi formati e dimensioni di immagine.
Automatizza i tuoi test: l’automazione è ovunque e anche tu puoi trarne vantaggio nei test. Puoi utilizzare strumenti come Selenium o LoadRunner per scrivere ed eseguire script di automazione dei test. Questi strumenti ti consentono anche di riutilizzare alcuni dei tuoi test.
Documenta i tuoi test: i test sono un processo continuo. Potrebbe essere necessario continuare a migliorare i test finché il codice non funziona come previsto. Documenta questo processo per rendere il tuo codice leggibile e facile da consultare.

Cursori di immagini: best practice

Mantienilo semplice: i cursori sono attraenti. Tuttavia, mantieni basso il numero di immagini in un dispositivo di scorrimento. Qualcosa come 4-7 immagini per diapositiva è l’ideale.
Metti alla prova i tuoi dispositivi di scorrimento: verificane la funzionalità prima di pubblicarli online.
Crea dispositivi di scorrimento reattivi: assicurati che i dispositivi di scorrimento creati rispondano alle diverse dimensioni dello schermo.
Usa immagini di alta qualità: scatta/scarica immagini di alta qualità per i tuoi dispositivi di scorrimento. Salvare le tue immagini nel formato SVG è un approccio fantastico, poiché non perdono la loro qualità quando le ridimensioni.
Ridimensiona le tue immagini: potresti avere diverse dimensioni e formati di immagine. Assicurati sempre che le immagini in uno slider abbiano le stesse dimensioni. Puoi raggiungere questo obiettivo tramite i CSS.

Avvolgendo

Ci auguriamo che ora tu possa creare un dispositivo di scorrimento delle immagini completamente funzionale per visualizzare dati importanti sul tuo sito Web senza utilizzare i framework dell’interfaccia utente. Puoi utilizzare lo stesso approccio per creare cursori video sulle pagine web.