Come creare un Carosello / Slideshow per il sito

Tra gli elementi che colpiscono di più gli occhi dei visitatori dei nostri siti web, sicuramente troviamo i caroselli di immagini, detti anche “Slideshow“. Gli slideshow sono contenitori che permettono di mostrare in successione un certo numero di immagini preimpostate, così da catturare l’attenzione degli utenti e mostrare loro un determinato tipo di informazione.

I caroselli sono presenti in tanti siti web, sicuramente anche tu ne avrai visto più di uno durante la navigazione web, questo perché sono elementi esteticamente gradevoli e con cui un utente può interagire, ideali per qualsiasi tipo di sito web a tema “notizie” oppure ad un sito e-commerce, ma anche per blog generici. Ad esempio anche BytePost possiede un carosello di immagini nella home page.

Molti temi per CMS, come WordPress, integrano slideshow già pronti per l’utilizzo finale, dove basta scegliere le proprie immagini e pubblicarle definitivamente. Tuttavia per chiunque abbia voglia o necessità di integrare un carosello personalizzato, con HTML si può fare.

Se sei interessato a creare un carosello/slideshow per il tuo sito attraverso del semplice codice HTML, sei nel posto giusto.

Creare uno Slideshow in HTML

L’apparenza inganna. Gli slideshow sembrano apparentemente degli elementi particolari e complessi, ma che in realtà sono programmati da semplice codice HTML e con un pizzico di CSS e JS.

Da notare infatti che il comportamento di un carosello di immagini web è definito da JavaScript, quindi devera programmazione. Se sei inesperto o non hai idea di cosa sia JavaScript non ti preoccupare, puoi sempre copiare interamente il codice in fondo da integrare nelle tue pagine web (deve avere comunque un minimo di conoscenza di HTML per procedere, se vuoi approfondire l’argomento segui il nostro corso gratuito HTML).

Il seguente codice può essere integrato facilmente in qualsiasi documento HTML, con l’unico accorgimento di sostituire i link delle immagini negli appositi spazi.

Il codice

Il codice HTML per la creazione di un carosello di immagini si divide in tre parti, rispettivamente per l’HTML; CSS e per JavaScript.

HTML serve a definire la struttura del carosello, con le immagini, testi descrittivi e frecce direzionali per la navigazione tra le varie immagini.
CSS per lo stile grafico del carosello. Se hai un po’ di dimestichezza con CSS potrai divertirti a modificare a piacimento i vari elementi che lo compongono.
JavaScript serve a definire per il comportamento del tutto. Se non lo conosci non modificare il codice sorgente JS.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        box-sizing: border-box}
      .slide1, .slide2 {
        display: none}
      img {
        vertical-align: middle;
      }
      .carosello {
        max-width: 1000px;
        position: relative;
        margin: auto;
      }
      .prec, .succ {
        cursor: pointer;
        user-select:none;
        position: absolute;
        top: 50%;
        width: 40px;
        height:40px;
        border:2px solid #DDDDDD;
        color: rgb(45,45,45);
        font-size: 18px;
        transition: 0.5s ease;
        border-radius:50%;
        text-align: center;
        line-height: 38px;
      }
      .succ {
        right: 0;
      }
      .prec:hover, .succ:hover {
        background-color: #DDDDDD;
        color: black;
      }
    </style>
  </head>
  <body>
    <p>Carosello 1:
    </p>
    <div class="carosello">
      <div class="slide1">
        <img src="IMMAGINE1.JPG" style="width:100%">
      </div>
      <div class="slide1">
        <img src="IMMAGINE2.JPG" style="width:100%">
      </div>
      <div class="slide1">
        <img src="IMMAGINE3.JPG" style="width:100%">
      </div>
      <a class="prec" onclick="cambiaSlide(-1, 0)">&#10094;
      </a>
      <a class="succ" onclick="cambiaSlide(1, 0)">&#10095;
      </a>
    </div>
    <p>Carosello 2:
    </p>
    <div class="carosello">
      <div class="slide2">
        <img src="IMMAGINE4.JPG" style="width:100%">
      </div>
      <div class="slide2">
        <img src="IMMAGINE5.JPG" style="width:100%">
      </div>
      <div class="slide2">
        <img src="IMMAGINE6.JPG" style="width:100%">
      </div>
      <a class="prec" onclick="cambiaSlide(-1, 1)">&#10094;
      </a>
      <a class="succ" onclick="cambiaSlide(1, 1)">&#10095;
      </a>
    </div>
    <script>
      var slideTab = [1,1];
      var slideId = []
      var slides = document.getElementsByClassName("carosello");
      for (var e = 1; e <= slides.length; e++){
        slideId.push("slide"+e);
      }
      creaSlide(1, 0);
      creaSlide(1, 1);
      function cambiaSlide(n, no) {
        creaSlide(slideTab[no] += n, no);
      }
      function creaSlide(n, no) {
        var i;
        var x = document.getElementsByClassName(slideId[no]);
        if (n > x.length) {
          slideTab[no] = 1}
        if (n < 1) {
          slideTab[no] = x.length}
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
        }
        x[slideTab[no]-1].style.display = "block";
      }
    </script>
  </body>
</html>

Questa può essere considerata una pagina HTML completa contenente 2 slideshow, facilmente riconoscibili.

Il codice proposto inoltre prevede l’integrazione di caroselli multipli. Puoi copiare un blocco “Slideshow” e copiarlo in una nuova posizione, questo funzionerà separatamente dagli altri.

Il carosello proposto è molto basico, tuttavia si adatta facilmente in molti contesti e si abbina bene con temi di vario genere.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

Come creare un Carosello / Slideshow per il sito

Creare uno Slideshow in HTML

Il codice

AUTORE

Simone Bernardo

Lascia un commento Annulla risposta