Swipe Carousel in Vue
How to make carousel using Vue 3 and Swiper 6
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 with❤by leovoon