Slideshow in Vue JS

In questa lezione realizziamo uno slideshow utilizzando Vue JS.

Gli slideshow sono un elemento comune nelle moderne applicazioni web, utilizzati per presentare contenuti in modo dinamico e coinvolgente. Con Vue.js, è possibile creare facilmente uno slideshow interattivo che offre una user experience fluida e piacevole. In questo tutorial, ti guiderò attraverso i passaggi per creare uno slideshow utilizzando Vue.js.

Preparazione dello slideshow in Vue JS

Passo 1: Preparazione del Progetto

Per iniziare, creiamo un nuovo progetto Vue.js utilizzando Vue CLI con il seguente comando:

vue create slideshow-app

Seguiamo le istruzioni di configurazione del nostro progetto slideshow in Vue.js. Una volta completata la configurazione, entriamo nella directory del progetto:

cd slideshow-app

Passo 2: Creazione del Componente Slideshow – script

Ora, creiamo un nuovo componente Vue per gestire lo slideshow. All’interno della directory src/components, creiamo un nuovo file chiamato SlideShow.vue e all’interno della sezione data(), definiamo due attributi:

slides: un array di oggetti, ognuno rappresentante una singola diapositiva. Ogni oggetto ha un id, un title, una description e un image.
currentSlide: un indice che tiene traccia della diapositiva corrente visualizzata nello slideshow.

Poi utilizziamo il metodo mounted() che viene chiamato quando il componente viene montato nel DOM. In questo caso, viene utilizzato per avviare un intervallo di tempo che cambia la diapositiva ogni 5 secondi, chiamando il metodo nextSlide().

Poi realizziamo i metodi per far funzionare lo slideshow:

nextSlide(): Questo metodo avanza alla prossima diapositiva nell’array slides. Se si raggiunge la fine dell’array, la variabile currentSlide viene riportata a 0 per tornare alla prima diapositiva.
prevSlide(): Questo metodo retrocede alla diapositiva precedente nell’array slides. Se ci si trova sulla prima diapositiva, la variabile currentSlide viene impostata alla lunghezza dell’array meno 1 per tornare all’ultima diapositiva.
goToSlide(index): Questo metodo imposta la variabile currentSlide sull’indice della diapositiva fornito come argomento, consentendo di passare direttamente a una diapositiva specifica.

<script>
  export default {
    name: 'SlideshowComponents',
    data() {
      return {
        slides: [
          { id: 1, title: 'Slide 1', description: 'Description Slide 1', image: '...' },
          { id: 2, title: 'Slide 2', description: 'Description Slide 2', image: '...' },
          { id: 3, title: 'Slide 3', description: 'Description Slide 3', image: '...' }
        ],
        currentSlide: 0
      };
    },
    mounted() {
      setInterval(this.nextSlide, 5000); // Cambia diapositiva ogni 5 secondi
    },
    methods: {
  nextSlide() {
    if (this.currentSlide + 1 < this.slides.length) {
      this.currentSlide++;
    } else {
      this.currentSlide = 0;
    }
  },
  prevSlide() {
    if (this.currentSlide > 0) {
      this.currentSlide--;
    } else {
      this.currentSlide = this.slides.length - 1;
    }
  },
  goToSlide(index) {
    this.currentSlide = index;
  }
}
  }
  </script>

Passo 3: Creazione del Componente Slideshow – template

Sistemiamo anche il template HTML del componente slideshow in Vue JS. Nel dettaglio inseriamo un elemento principale a cui assegniamo la classe hero e all’interno inseriamo un elemento che contiene tutte le diapositive dello slideshow. Utilizziamo una direttiva v-for per iterare attraverso l’array slides e visualizzare dinamicamente ogni diapositiva all’interno di questo contenitore. La classe slide viene assegnata a ciascuna diapositiva. Inoltre utilizziamo questa direttiva :class="{ active: index === currentSlide }" per applicare la classe active solo alla diapositiva corrente. La variabile currentSlide tiene traccia dell’indice della diapositiva corrente.

Dunque utilizziamo questa direttiva :style="{ backgroundImage: 'url(' + slide.image + ')' }" per applicare lo stile di sfondo di ogni diapositiva utilizzando l’immagine specificata nella proprietà image di ogni oggetto slide. Visualizziamo inoltre titolo e descrizione.

Implementiamo poi la parte inerente la freccia sinistra e destra per la navigazione. Utilizziamo due pulsanti con le classi arrow left e arrow right per consentire all’utente di scorrere avanti e indietro tra le diapositive. Ogni pulsante ha un evento @click che chiama i metodi prevSlide e nextSlide rispettivamente.

Utilizziamo infine dei pallini per indicare il numero di diapositive e la diapositiva corrente. Ogni pallino ha la classe dot e la classe active se corrisponde alla diapositiva corrente. Gli utenti possono fare clic su questi pallini per passare direttamente a una specifica diapositiva, tramite l’evento @click che chiama il metodo goToSlide(index).

Ecco dunque come si presenta il template HTML:

<template>
    <section class="hero">
      <!-- SlideShow content -->
      <div class="slideshow">
        <div v-for="(slide, index) in slides" :key="slide.id" class="slide" :class="{ active: index === currentSlide }" :style="{ backgroundImage: 'url(' + slide.image + ')' }">
          <h2>{{ slide.title }}</h2>
          <p>{{ slide.description }}</p>
        </div>
      </div>
      <!-- Freccia sinistra per la navigazione -->
      <button class="arrow left" @click="prevSlide">&#10094;</button>
      <!-- Freccia destra per la navigazione -->
      <button class="arrow right" @click="nextSlide">&#10095;</button>
      <!-- Pallini per indicare il numero di diapositive -->
      <div class="dots">
        <span v-for="(slide, index) in slides" :key="slide.id" class="dot" :class="{ active: index === currentSlide }" @click="goToSlide(index)"></span>
      </div>
    </section>
  </template>

Passo 4: Creazione del Componente Slideshow – template

Infine inseriamo il codice CSS a piacere. Io ad esempio ho inserito questo:

<style scoped>
  /* Stili CSS per lo slideshow */
  .hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px; /* Aggiunto per separare lo slideshow dal contenuto successivo */
  }
  
  .slideshow {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .slide {
    width: 100%;
    height: 400px;
    background-size: cover;
    display: none; /* Nascondiamo le slide per impostazione predefinita */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 20px;
  }
  
  .slide.active {
    display: flex; /* Visualizziamo solo la slide attiva */
  }
  
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .arrow:hover {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .arrow.left {
    left: 10px;
  }
  
  .arrow.right {
    right: 10px;
  }
  
  .dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #fff;
  }
  </style>

Infine per concludere lo slideshow realizzato in Vue JS, inseriamo questo componente su App.Vue:

<template>
  ...
  <SlideShow />
  ...
</template>
<script>

import SlideShow from "./components/SlideShow.vue";

export default {
  name: "App",
  components: {

    SlideShow,
  },
};
</script>

Conclusioni

In questa lezione, abbiamo esaminato come creare uno slideshow interattivo utilizzando Vue JS. Lo slideshow è stato implementato con una serie di diapositive dinamiche, ciascuna contenente un’immagine, un titolo e una descrizione. Gli utenti possono navigare tra le diapositive utilizzando le frecce sinistra e destra o facendo clic sui pallini di indicazione corrispondenti. Inoltre, abbiamo incluso la funzionalità per passare automaticamente alla successiva diapositiva ogni 5 secondi.

Questo esempio illustra l’uso delle direttive Vue.js come v-for, v-bind, v-on, nonché la gestione degli eventi e lo stile condizionale. È possibile personalizzare ulteriormente lo slideshow aggiungendo effetti di transizione, implementando controlli aggiuntivi o modificando lo stile delle diapositive.

In definitiva, Vue.js offre un modo intuitivo e potente per creare componenti interattivi come uno slideshow, consentendo agli sviluppatori di realizzare esperienze utente coinvolgenti e dinamiche all’interno delle proprie applicazioni web.

>> emit

tabs >>