Add a Swiper Carousel into a Vue 3 App with Swiper 6

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.

Virtual Slides

We can add virtual slides, which are slides that are rendered completely by Vue 3.

It doesn’t require anything except the virtual prop.

For instance, we can write:

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    virtual
  >
    <swiper-slide v-for="n of 50" :virtualIndex="n" :key="n"
      >Slide {{ n }}</swiper-slide
    >
  </swiper>
</template>
<script>
import SwiperCore, { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";

SwiperCore.use([Virtual]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log("slide change");
    },
  },
};
</script>

to add the swiper component that renders virtual slides.

Also, we have to add SwiperCore.use([Virtual]) to add the Virtual plugin so that we can render virtual slides.

Controller

We can add a slider that’s controlled by another slider.

For instance, we can write:

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="setControlledSwiper"
  >
    <swiper-slide v-for="n of 50" :virtualIndex="n" :key="n"
      >Slide {{ n }}</swiper-slide
    >
  </swiper>

  <swiper :controller="{ control: controlledSwiper }">
    <swiper-slide v-for="n of 50" :virtualIndex="n" :key="n"
      >Slide {{ n }}</swiper-slide
    >
  </swiper>
</template>

<script>
import SwiperCore, { Controller } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";

SwiperCore.use([Controller]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      controlledSwiper: null,
    };
  },
  methods: {
    setControlledSwiper(swiper) {
      this.controlledSwiper = swiper;
    },
  },
};
</script>

The first swiper controls the behavior of the 2nd swiper.

We do this by calling the setControlledSwiper method when the first swiper is initialized.

In the method, we just set swiper as the value of this.controlledSwiper .

Now in the 2nd swiper , we pass in an object with the control property set to controlledSwiper into the controller prop to let the first swiper control the 2nd one.

We also have to addSwiperCore.use([Controller]) to let us add controlled swipers.

Also, we can add 2-way control to swipers.

For instance, we can write:

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="setFirstSwiper"
    :controller="{ control: secondSwiper }"
  >
    <swiper-slide v-for="n of 50" :virtualIndex="n" :key="n"
      >Slide {{ n }}</swiper-slide
    >
  </swiper>

  <swiper @swiper="setSecondSwiper" :controller="{ control: firstSwiper }">
    <swiper-slide v-for="n of 50" :virtualIndex="n" :key="n"
      >Slide {{ n }}</swiper-slide
    >
  </swiper>
</template>

<script>
import SwiperCore, { Controller } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";

SwiperCore.use([Controller]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      firstSwiper: null,
      secondSwiper: null,
    };
  },
  methods: {
    setFirstSwiper(swiper) {
      this.firstSwiper = swiper;
    },
    setSecondSwiper(swiper) {
      this.secondSwiper = swiper;
    },
  },
};
</script>

We have the setFirstSwiper and setSecondSwiper to set the firstSwiper and secondSwiper reactive properties respectively.

Then we pass them as values of the controller prop to enable control of them.

Now when we swipe one of the sliders, the other one will change.

Conclusion

We can add more complex sliders into our Vue 3 app with Swiper 6.