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:
.slider-container2 { position: relative; width: 100%; overflow: hidden; } .slider2 { display: flex; height: 600px; transition: transform 0.5s ease-in-out; } .slide2 { min-width: 100%; box-sizing: border-box; display: none; } .slide2.active { display: block; } .img-slide { 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; /* Colore del testo */ padding: 10px; /* Aggiungi spazio intorno al testo */ border-radius: 5px; /* Bordi arrotondati
