Usare Swiper in Vue.js

Swiper è una galleria pensata principalmente per essere responsive e touch.

In questo articolo vediamo come usarla in Vue.js.

Prima di tutto installiamola con npm:

npm i swiper

A questo punto possiamo vedere il codice del componente:

<template>
  <swiper style="min-height: 150px;"
          :modules="modules"
          :slides-per-view="3"
          :space-between="50"
          navigation
          :pagination="{ clickable: true }"
          :scrollbar="{ draggable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
  </swiper>
</template>
<script>
import {Navigation, Pagination, Scrollbar, A11y} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/vue';

import 'swiper/css/bundle';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('CAMBIO SLIDE');
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
};
</script>

Io ho aggiunto il foglio di stile direttamente qui; se dovete usare la Swiper in più pagine, probabilmente è meglio includerlo globalmente.

Enjoy!