Swipe Carousel in Vue

How to make carousel using Vue 3 and Swiper 6

slide element 1
slide element 2
slide element 3
slide element 4

install SwiperJS package

npm i swiper

logic

<script setup lang='ts'>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

</script>

view

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
  >
    <swiper-slide
      v-for="slide in 4"
      :key="slide"
      class="border p-2"
    >
    <!-- Element goes here -->
      <div class="w-20 border border-green-300 h-20">
        slide element {{ slide }}
      </div>
    <!-- Element goes here -->
    </swiper-slide>

  </swiper>
</template>

Add modules for e.g Autoplay

<script setup lang='ts'>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
👉 import SwiperCore, { Autoplay } from 'swiper' 
👉 SwiperCore.use([Autoplay])

</script>

and use in template

  <swiper
    :slides-per-view="3"
    :space-between="50"
 👉 autoplay 
 👉 delay="2000"
 👉 pause-on-mouse-enter
>

Refer Swiperjs apidocsfor more info on props.

Ok.

Made withby leovoon