vue-carousel

This template should help get you started developing with Vue3 in Vite or laravel or any supported platform for vue.

Project Setup

npm install @search4asraful/vue-carousel

Init where component will be used

import VueCarousel from '@search4asraful/vue-carousel';

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Demo image | used as Carousel

Demo image | used as feedback section

Configuration

Tweek them according your need.

Property	Type	Default	Description
autoplay	Boolean	false	make true or just autoplay to start autoplay of slides.
autoplaydelay	Number	2500	Time elapsed before advancing slide in autoplay.
dragging	Boolean	true	Enabled left & right dragging.
navigation	Boolean	true	Enabled next & previous clicks to slide.
indicators	Boolean	true	Enabled indicators in bottom also cistening clicks to select slide.

Example:

autoplay :autoplaydelay="5000" :dragging="false" :navigation="false" :indicators="false"

---

In this demo, I'm using the Tailwind CSS framework. You can use your preferred framework like Bootstrap or raw CSS. Regardless of your choice, it won't affect the components.

---

Example: how to use in script setup :slidesData="dyamicData" data pass is mendatory

    <template>
        <VueCarousel :slidesData="sliders" autoplay autoplaydelay="6000">
            <template #slide="{ slide }">
            <div class="px-14 flex justify-center flex-col items-center pb-10">
                <p class="leading-relaxed text-lg text-blue-400">
                {{ slide.text }}
                </p>
                <h2
                class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm"
                >
                {{ slide.author }}
                </h2>
                <!-- :slidesData="dyamicData" pass is mandatory -->
            </div>
            </template>
        </VueCarousel>
    </template>

    <script setup>
        import VueCarousel from "@search4asraful/vue-carousel";

        const sliders = [
        {
            key: 1,
            text: "Item 1",
            author: "HOLDEN CAULFIELD",
        },
        {
            key: 2,
            text: "Item 2",
            author: "JANE DOE",
        },
        {
            key: 3,
            text: "Item 3",
            author: "JOHN SMITH",
        },
    ];
    </script>

    <style scoped>
    /* Add your preferd styles here */
    </style>
    

Example: how to use in export default script :slidesData="dyamicData" data pass is mendatory

    <template>
        <VueCarousel :slidesData="sliders" autoplay autoplaydelay="6000">
            <template #slide="{ slide }">
            <div class="px-14 flex justify-center flex-col items-center pb-10">
                <p class="leading-relaxed text-lg text-blue-400">
                {{ slide.text }}
                </p>
                <h2
                class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm"
                >
                {{ slide.author }}
                </h2>
                <!-- :slidesData="dyamicData" pass is mandatory -->
            </div>
            </template>
        </VueCarousel>
    </template>

    <script>
    import VueCarousel from "@search4asraful/vue-carousel";

    export default {
        components: {
            VueCarousel,
        },
        data() {
            return {
            sliders: [
                {
                key: 1,
                text: "Item 1",
                author: "HOLDEN CAULFIELD",
                },
                {
                key: 2,
                text: "Item 2",
                author: "JANE DOE",
                },
                {
                key: 3,
                text: "Item 3",
                author: "JOHN SMITH",
                },
            ],
            };
        },
    };
    </script>

    <style scoped>
    /* Add your preferd styles here */
    </style>