Swiper for Vue.js lets us add a carousel to our Vue 3 app.
In this article, we’ll look at how to add a carousel into our Vue 3 app with Swiper.
Installation
We can install the Swiper package by running:
npm i swiper
Basic Usage
Once we installed the package, we can add a slider by writing:
<template>
<swiper
:slides-per-view="3"
:space-between="50"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-for="n of 50" :key="n">Slide {{ n }}</swiper-slide>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import 'swiper/swiper-bundle.css'
export default {
components: {
Swiper,
SwiperSlide,
},
methods: {
onSwiper(swiper) {
console.log(swiper);
},
onSlideChange() {
console.log("slide change");
},
},
};
</script>
We add the swiper component to add the slider.
slides-per-view lets us set the number of slides to show per view.
space-between has the space between slides in pixels.
It emits the swiper event which is emitted when the slider is created.
slideChange event is emitted when we change slides.
We import the swiper/swiper-bundle.css file to add styles for the slides.
swiper-slide has the slides for the slider.
We can add the zoom prop to enable additional wrapper for zoom mode if it’s set to true .
virtualIndex has the index for virtual slides.
SwiperSlide Slot Props
We can get some data from the swiper-slide ‘s component’s slot props.
For example, we get the isActive prop to see if the slide is active:
<template>
<swiper
:slides-per-view="3"
:space-between="50"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-slot="{ isActive }" v-for="n of 50" :key="n"
>Slide {{ n }} {{ isActive ? "active" : "not active" }}</swiper-slide
>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
export default {
components: {
Swiper,
SwiperSlide,
},
methods: {
onSwiper(swiper) {
console.log(swiper);
},
onSlideChange() {
console.log("slide change");
},
},
};
</script>
It also provides the isPrev slot prop to see whether a slide is a slide previous to the active one.
The isNext slot prop to see whether a slide is a slide next to the active one.
isVisible indicates whether the current slide is visible.
isDuplicate indicates whether the slide is a duplicate slide.
Slots
We can populate slots provided by the swiper component.
For instance, we can write:
<template>
<swiper
:slides-per-view="3"
:space-between="50"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-for="n of 50" :key="n">Slide {{ n }}</swiper-slide>
<template v-slot:container-start>
<span>Container Start</span>
</template>
<template v-slot:container-end>
<span>Container End</span>
</template>
<template v-slot:wrapper-start>
<span>Wrapper Start</span>
</template>
<template v-slot:wrapper-end>
<span>Wrapper End</span>
</template>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
export default {
components: {
Swiper,
SwiperSlide,
},
methods: {
onSwiper(swiper) {
console.log(swiper);
},
onSlideChange() {
console.log("slide change");
},
},
};
</script>
We populate the container-start slot to add content to the top of the slider container.
container-end adds content to the bottom of the slider container
wrapper-start adds content before the first slide.
wrapper-end adds content after the last slide.
Conclsion
We can add sliders into our Vue 3 app with Swiper 6.
