Carosello immagini con Vue

da Cristina | Apr 10, 2024 | Vue, Web

In questa lezione svilupperemo un carosello di immagini con Vue. I caroselli di immagini sono componenti molto comuni nelle interfacce utente moderne. Con Vue.js, possiamo creare facilmente un carosello di immagini dinamico e reattivo che consentirà agli utenti di navigare attraverso diverse immagini in modo intuitivo.

Per seguire questo tutorial, è necessario avere una conoscenza di base di HTML, CSS e JavaScript, nonché una comprensione di base di Vue.js.

Impostazione del Progetto Carosello immagini con Vue

Innanzitutto creiamo un nuovo progetto Vue.js utilizzando Vue CLI:

vue create vue-carousel

Quindi seguiamo le istruzioni a schermo per la configurazione del progetto. Una volta creato il progetto, spostiamoci nella directory del progetto:

cd vue-carousel

Creazione del Componente Carosello con Vue

Ora creiamo il nostro componente carosello. All’interno della cartella src/components, creiamo un nuovo file chiamato CarouselComponent.vue e lavoriamo sul template, dove definiamo la struttura del caroselle in questo modo:

• un contenitore principale carousel-container che racchiude l’intero carosello.
• carousel è il contenitore degli elementi del carosello.
• un altro contenitore carousel-inner che tiene le immagini e viene traslato per simulare lo scorrimento.
• carousel-item rappresenta ciascun elemento dell’immagine nel carosello.
• Gli attributi :style vengono utilizzati per applicare stili dinamici per la larghezza del carosello e per la trasformazione che muove le immagini.
• Il ciclo v-for viene utilizzato per iterare attraverso l’array di immagini e renderizzarle dinamicamente.

Ecco di seguito la parte inerente il template:

<template>
  <div class="carousel-container" :style="{ width: carouselWidth + 'px' }">
    <h2>Carosello immagini</h2>
    <div class="carousel">
      <div class="carousel-inner" :style="{ transform: 'translateX(' + translateX + 'px)' }">
        <div v-for="(image, index) in images" :key="index" class="carousel-item">
          <img :src="image" alt="Carousel Image" />
        </div>
      </div>
    </div>
    <div class="carousel-controls">
      <button @click="prevSlide" :disabled="currentIndex === 0">Prev</button>
      <button @click="nextSlide" :disabled="currentIndex === totalItems - itemsPerPage">Next</button>
    </div>
  </div>
</template>

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Continuiamo a lavorare con il carosello immagini con Vue, definendo la logica del componente nello script:

• In data, definiamo lo stato iniziale del carosello, incluso l’indice corrente, la traslazione translateX, l’array di immagini e altre opzioni come il numero di immagini per pagina, la larghezza ed il margine di ciascuna immagine. Sostituite il valore 250 con la larghezza effettiva delle vostre immagini ed impostate anche il valore del margine desiderato.
• Utilizziamo poi una proprietà computed carouselWidth per calcolare la larghezza totale del carosello in base alla larghezza dell’elemento e al margine tra di essi.
• Definiamo i metodi nextSlide e prevSlide per gestire la navigazione avanti e indietro nel carosello.

Metodo nextSlide()

Questo metodo viene chiamato quando l’utente fa clic sul pulsante “Next” per scorrere avanti nel carosello.

1. Prima di tutto, controlliamo se l’indice corrente currentIndex è inferiore al numero totale di elementi meno il numero di elementi visualizzati per pagina (totalItems - itemsPerPage). Questo controllo serve a garantire che non andremo oltre l’ultimo gruppo di immagini nel carosello.
2. Se l’indice corrente è inferiore al valore massimo consentito, incrementiamo currentIndex di uno e spostiamo translateX verso sinistra. Questo viene fatto sottraendo dalla proprietà translateX la somma della larghezza di ciascuna immagine e del margine tra di esse (itemWidth + margin).

Metodo prevSlide()

Questo metodo viene dunque chiamato quando l’utente fa clic sul pulsante “Prev” per tornare indietro nel carosello.

1. Prima di tutto, controlliamo se l’indice corrente currentIndex è maggiore di zero. Questo controllo serve a garantire che non andremo oltre la prima immagine nel carosello.
2. Se l’indice corrente è maggiore di zero, decrementiamo currentIndex di uno e spostiamo translateX verso destra. Questo viene fatto aggiungendo alla proprietà translateX la somma della larghezza di ciascuna immagine e del margine tra di esse (itemWidth + margin).

In questo modo, ogni volta che l’utente preme i pulsanti “Next” o “Prev”, l’indice corrente viene aggiornato di conseguenza. Si aggiorna anche la proprietà translateX che determina la posizione del gruppo di immagini nel carosello, consentendo all’utente di scorrere tra le immagini in modo fluido.

Ecco dunque lo script:

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      translateX: 0,
      images: [
        'https://cdn.pixabay.com/photo/2024/03/05/14/33/purple-8614655_640.jpg',
        'https://cdn.pixabay.com/photo/2023/01/10/16/23/hedgehog-7710053_640.jpg',
        'https://cdn.pixabay.com/photo/2022/11/07/18/29/bird-7576994_640.jpg',
        'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg',
        'https://cdn.pixabay.com/photo/2024/02/15/15/29/crocus-8575610_640.jpg',
        'https://cdn.pixabay.com/photo/2015/04/10/01/41/fox-715588_960_720.jpg'
      ],
      itemsPerPage: 3, //sostituire con il numero di immagini desiderato
      itemWidth: 250, // Larghezza di ciascuna immagine
      margin: 20 // Margine delle immagini
    };
  },
  computed: {
    totalItems() {
      return this.images.length;
    },
    carouselWidth() {
      return (this.itemWidth + this.margin) * this.itemsPerPage;
    }
  },
  methods: {
    nextSlide() {
      if (this.currentIndex < this.totalItems - this.itemsPerPage) {
        this.currentIndex++;
        this.translateX -= this.itemWidth + this.margin;
      }
    },
    prevSlide() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.translateX += this.itemWidth + this.margin;
      }
    }
  }
};
</script>

Possiamo anche personalizzare lo stile del carosello aggiungendo regole CSS all’interno dello stile dello stesso componente:

<style scoped>
.carousel-container {
  margin: 0 auto;
  overflow: hidden;
}

.carousel {
  display: flex;
  margin-bottom: 10px;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  flex: 0 0 auto;
}

.carousel img {
  width: 250px;
  height: auto;
  margin: 0 10px;
}

.carousel-controls {
  display: flex;
  justify-content: center;
}

.carousel-controls button {
  margin: 0 5px;
}
</style>

Conclusioni

In questo articolo, abbiamo esaminato come creare un carosello di immagini dinamico utilizzando Vue Abbiamo definito la struttura del nostro componente Vue, includendo elementi HTML per visualizzare le immagini e i controlli per navigare tra di esse.

Utilizzando il data binding di Vue, abbiamo anche collegato le immagini e le informazioni di navigazione al nostro componente, consentendo all’utente di scorrere avanti e indietro tra le immagini.

Abbiamo anche discusso l’importanza di calcolare dinamicamente la larghezza del carosello in base al numero di immagini e ai margini tra di esse, garantendo così che il carosello si adatti correttamente al contenuto e sia visualizzato correttamente su diversi dispositivi e dimensioni dello schermo.

Infine, abbiamo esaminato come personalizzare ulteriormente il carosello aggiungendo funzionalità come la navigazione automatica, gli indicatori di paginazione e altro ancora.

Dunque, con Vue.js è possibile creare facilmente caroselli di immagini interattivi e reattivi che migliorano l’esperienza utente sulle pagine web. Spero che questo articolo sia di aiuto a tanti aspiranti programmatori che desiderano creare progetti interattivi con Vue.js!

Alcuni link utili

Corso linguaggio JavaScript

Libro JavaScript

Tutorial JavaScript

Componenti Vue.js

Option API

Composition API

Counter in Vue.js (con le due sintassi: Option API e Composition API)

Direttiva v-model

props con Option API