Vue 3 with Tailwind CSS Carousel Slider Example

In this tutorial, we will create carousel slider in vue 3 composition api using tailwind css. We will see arrow navigation slider, autoplay slider, vertical carousel slider examples with Tailwind CSS & Vue 3.

How to Install Tailwind CSS in Vue 3

Install Vite + Vue 3 + Typescript + Tailwind CSS 3

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

Vue 3 with tailwind css simple arrow navigation slider using swiperjs.

<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.

<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.

<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.

<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>