Vediamo cosa occorre per creare un semplice Slider (carosello di immagini) tramite HTML+CSS+JavaScript. Ovviamente è un esempio di base per rendere l'idea (senza tutta la complessità, pesantezza di Slider Revolution di WordPress, per esempio) e in questo caso lo slider procede non in automatico (es. dopo tot secondi) ma legato all'evento clic su un bottone chiamato NEXT.

Prima di mostrare il codice, vediamo quali sono gli aspetti chiave:

  • elemento div, di una certa dimensione; ho impostato un background-color iniziale, analogamente si potrebbe mettere background-image:url(...), che è la scelta ideale proprio nel caso si voglia uno slider con proprie immagini
  • tramite JavaScript gestisco l'evento "clic" sul bottone; verifica una condizione:
    • se il background-color è rosso (esempio immagine1), allora diventa blu
    • se il background-color è blu (esempio immagine2), allora diventa rosso
    • analogamente si potrebbero avere più di due configurazioni (sfondi, immagini) e gestire la cosa quindi tramite una condizione opportuna
  • da notare che JavaScript necessita della notazione "Camel Case", vale a dire che la proprietà CSS background-color diventa backgroundColor
  • anziché metterlo uguale a "red" oppure in notazione esadecimale "#f00", la notazione nel caso del colore rosso è 'rgb(255, 0, 0)'

Vediamo ora il codice della pagina HTML con CSS e JavaScript in blocco.

<html>
<head>
  <style>
#box {width:200px;height:200px;background-color:#f00;}
  </style>
</head>
<body>
  <div id="box"></div>
<button id="B1">NEXT</button>
  <script>
B1.addEventListener("click",function(){
    if (box.style.backgroundColor == 'rgb(255, 0, 0)') {
box.style.backgroundColor='rgb(0, 0, 255)';
    } else {
box.style.backgroundColor='rgb(255, 0, 0)';
    }
})
  </script>
</body>
</html>

Ecco un'immagine di come appare; inizialmente sfondo rosso, premendo il bottone "NEXT" diventa blu, per poi tornare ancora rosso.
Slider immagini semplice, con JavaScript

L'esempio è ovviamente semplice, spartano, serve a rendere l'idea. Partendo da questo spunto, si possono aggiungere miglioramenti come ad esempio un'immagine con background-image:url(...) oppure una lista di più configurazioni anziché solo due, così come gestire la presenza di più immagini (ad esempio 1-2-3 e in base alla verifica il clic sul bottone mostra l'immagine corretta in successione anziché la semplice alternanza 1-2).

Powered by: FreeFlarum.
(remove this footer)