Vue 3 with Tailwind CSS Carousel Slider Example

In this tutorial, we will create a carousel slider in Vue 3 using the composition API and Tailwind CSS. We will explore examples such as arrow navigation slider, autoplay slider, and vertical carousel slider.

Tool Use

Vue 3

Tailwind CSS 3.v

Swiper JS

Install swiper in Vue 3

Swiper Vue.js plugin is available only via NPM as a part of the main Swiper library:

npm i swiper

Example 1

Create a simple arrow navigation slider in Vue 3 using Tailwind CSS and Swiper.js.

Vue

<template>
    <swiper :navigation="true" :modules="modules" class="mySwiper">
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/03/20/15/40/nature-7081138__340.jpg" alt="image slide 1" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/24/17/55/wind-energy-7342177__340.jpg" alt="image slide 2" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/26/03/35/jogger-7344979__340.jpg" alt="image slide 3" />
        </swiper-slide>
    </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/navigation";

// import required modules
import { Navigation } from "swiper";

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Navigation],
        };
    },
};
</script>

Example 2

Vue 3 composition api with tailwind css pagination carousel slider using swiperjs.

Vue

<template>
    <swiper :pagination="{
        dynamicBullets: true,
    }" :modules="modules" class="mySwiper">
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/03/20/15/40/nature-7081138__340.jpg" alt="image slide 1" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/24/17/55/wind-energy-7342177__340.jpg" alt="image slide 2" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/26/03/35/jogger-7344979__340.jpg" alt="image slide 3" />
        </swiper-slide>
    </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/pagination";

// import required modules
import { Pagination } from "swiper";

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Pagination],
        };
    },
};
</script>

Example 3

Vue 3 with tailwind css auto play slider with arrow and pagination using swiperjs.

Vue

<template>
    <swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{
        delay: 2500,
        disableOnInteraction: false,
    }" :pagination="{
        clickable: true,
    }" :navigation="true" :modules="modules" class="mySwiper">
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/03/20/15/40/nature-7081138__340.jpg" alt="image slide 1" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/24/17/55/wind-energy-7342177__340.jpg" alt="image slide 2" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/26/03/35/jogger-7344979__340.jpg" alt="image slide 3" />
        </swiper-slide>
    </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/pagination";
import "swiper/css/navigation";

// import required modules
import { Autoplay, Pagination, Navigation } from "swiper";

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Autoplay, Pagination, Navigation],
        };
    },
};
</script>

Example 4

Vue 3 composition api with tailwind css vertical slider using swiperjs.

Vue

<template>
    <swiper :direction="'vertical'" :pagination="{
        clickable: true,
    }" :modules="modules" class="mySwiper">
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/03/20/15/40/nature-7081138__340.jpg" alt="image slide 1" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/24/17/55/wind-energy-7342177__340.jpg" alt="image slide 2" />
        </swiper-slide>
        <swiper-slide>
            <img className="object-fill w-full h-96"
                src="https://cdn.pixabay.com/photo/2022/07/26/03/35/jogger-7344979__340.jpg" alt="image slide 3" />
        </swiper-slide>
    </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/pagination";

// import required modules
import { Pagination } from "swiper";

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Pagination],
        };
    },
};
</script>