Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Bootstrap Carousel

Carousel works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

First Slide Label

This is content paragraph enough to say.

							
                                
<template>
    <BCarousel controls indicators ride="carousel">
        <BCarouselSlide :img-src="slide1">
            <h5 class="text-white">First Slide Label</h5>
            <p>This is content paragraph enough to say.</p>
        </BCarouselSlide>
        <BCarouselSlide :img-src="slide2">
            <h5 class="text-white">First Slide Label</h5>
            <p>This is content paragraph enough to say.</p>
        </BCarouselSlide>
        <BCarouselSlide :img-src="slide3">
            <h5 class="text-white">First Slide Label</h5>
            <p>This is content paragraph enough to say.</p>
        </BCarouselSlide>
    </BCarousel>
</template>

<script setup>
import slide1 from '@/img_src/slide1.jpg'
import slide2 from '@/img_src/slide2.jpg'
import slide3 from '@/img_src/slide3.jpg'
</script>

Basic Swiper carousel

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

							
                                
<template>
    <swiper :pagination="{ dynamicBullets: true }" :modules="modules">
        <swiper-slide>
            <img :src="slide2" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide>
            <img :src="slide4" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide>
            <img :src="slide5" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide>
            <img :src="slide1" alt="Swiper content" />
        </swiper-slide>
    </swiper>
</template>

<script>
// Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper core and required modules
  import { Pagination } from 'swiper/modules';

// Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/pagination';

  //images
import slide1 from '@/img_src/slide1.jpg'
import slide2 from '@/img_src/slide2.jpg'
import slide4 from '@/img_src/slide4.jpg'
import slide5 from '@/img_src/slide5.jpg'

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    data() {
        return {
            modules: [Pagination],
            slide1,
            slide2,
            slide4,
            slide5,
        }

    },

}
</script>

Responsive Swiper carousel

Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see.

							
                                
<template>
    <swiper 
    :pagination="{ clickable: true }" 
    :modules="modules" 
    :breakpoints="swiperBreakpoints" 
    class="swiper-carousel"
    >
        <swiper-slide class='swiper-item swiper-content'>
            <img :src="slide1" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide class='swiper-item swiper-content'>
            <img :src="slide2" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide class='swiper-item swiper-content'>
            <img :src="slide3" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide class='swiper-item swiper-content'>
            <img :src="slide4" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide class='swiper-item swiper-content'>
            <img :src="slide5" alt="Swiper content" />
        </swiper-slide>
        <swiper-slide class='swiper-item swiper-content'>
            <img :src="slide6" alt="Swiper content" />
        </swiper-slide>
    </swiper>
</template>

<script>
// Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper core and required modules
  import { Pagination } from 'swiper/modules';

// Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/pagination';

  //images
import slide1 from '@/img_src/slide1.jpg'
import slide2 from '@/img_src/slide2.jpg'
import slide3 from '@/img_src/slide3.jpg'
import slide4 from '@/img_src/slide4.jpg'
import slide5 from '@/img_src/slide5.jpg'
import slide6 from '@/img_src/slide6.jpg'

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    data() {
        return {
            modules: [Pagination],
            swiperBreakpoints: {
                0: { slidesPerView: 1, },
                480: { slidesPerView: 2, spaceBetween: 20 },
                640: { slidesPerView: 2, spaceBetween: 20 },
                768: { slidesPerView: 2, spaceBetween: 30 },
                800: { slidesPerView: 3, spaceBetween: 10 },
                1024: { slidesPerView: 4, spaceBetween: 10 },
            },
            slide1,
            slide2,
            slide3,
            slide4,
            slide5,
            slide6,
        }

    },

}
</script>

Card Carousel - Center with Loop

Works well with odd and even items on screen. Keep in mind that dots don't work here like a pagination.

Some quick example text to build on the card title and make up the bulk of the card's content.

							
                                
<template>
    <swiper :loop="true" :slides-per-view="3" :pagination="{ clickable: true }" :modules="modules"
    :breakpoints="swiperBreakpoints" class="swiper-carousel">
        <swiper-slide>
            <div class="card">
                <img class="card-img-top" :src="slide1" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text">Some quick example text to
                        build on the card title and make up the bulk of
                        the card's content.</p>
                </div>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="card">
                <img class="card-img-top" :src="slide2" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text">Some quick example text to
                        build on the card title and make up the bulk of
                        the card's content.</p>
                </div>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="card">
                <img class="card-img-top" :src="slide3" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text">Some quick example text to
                        build on the card title and make up the bulk of
                        the card's content.</p>
                </div>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="card">
                <img class="card-img-top" :src="slide4" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text">Some quick example text to
                        build on the card title and make up the bulk of
                        the card's content.</p>
                </div>
            </div>
        </swiper-slide>
    </swiper>
</template>

<script>
// Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper core and required modules
  import { Autoplay, Pagination } from 'swiper/modules';

// Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/pagination';

  //images
import slide1 from '@/img_src/slide1.jpg'
import slide2 from '@/img_src/slide2.jpg'
import slide3 from '@/img_src/slide3.jpg'
import slide4 from '@/img_src/slide4.jpg'

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    data() {
        return {
            modules: [Autoplay, Pagination],
            swiperBreakpoints: {
                0: { slidesPerView: 1 },
                480: { slidesPerView: 2, spaceBetween: 20 },
                640: { slidesPerView: 2, spaceBetween: 20 },
                768: { slidesPerView: 2, spaceBetween: 30 },
                800: { slidesPerView: 3, spaceBetween: 10 },
                1024: { slidesPerView: 3, spaceBetween: 10 },
            },
            slide1,
            slide2,
            slide3,
            slide4,

    },

}
</script>

Auto Height Carousel

To enable use autoHeight: true. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to heighest item.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. A hic magni rem consectetur iure? Suscipit esse totam id sed! Nostrum. https://demo.de Posted on Jan 3, 2024

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, dicta!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis natus molestias quas voluptas at atque doloremque odit doloribus tempora perferendis ratione dolorum ea eligendi enim est, culpa rerum quo sunt, ex tempore accusamus in assumenda fuga quibusdam! Posted on Jan 5, 2024

							
                                
<template>
    <swiper :autoHeight="true" :loop="true" :autoplay="{ delay: 5000 }"
    :pagination="{ clickable: true }" :modules="modules"
    class="swiper-carousel tweeter-carousel">
    <swiper-slide>
        <span class="tweet">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A hic magni rem consectetur iure? Suscipit esse totam id sed! Nostrum. <a href="#demo" data-expanded-url="#demo" target=" _blank" title="#title" data-scribe="element:url"><span>https://</span>demo.de<span>&nbsp;</span></a>
            <span class="timePosted">
                <a href="#demo">Posted on Jan 3, 2024</a>
            </span>
        </span>
    </swiper-slide>
    <swiper-slide>
        <span class="tweet">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem, dicta!<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis natus molestias quas voluptas at atque doloremque odit doloribus tempora perferendis ratione dolorum ea eligendi enim est, culpa rerum quo sunt, ex tempore accusamus in assumenda fuga quibusdam! <span class="timePosted"><a href="#demo">Posted on Jan 5, 2024</a></span>
        </span>

    </swiper-slide>
    </swiper>
</template>

<script>
// Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper core and required modules
  import { Autoplay, Pagination } from 'swiper/modules';

// Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/pagination';

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    data() {
        return {
            modules: [Autoplay, Pagination],
    },

}
</script>

Bootstrap Carousel
Basic Swiper carousel
Responsive Swiper carousel
Card Carousel
Auto height carousel