Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

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.

Second slide label

This is content paragraph enough to say.

Third slide label

This is content paragraph enough to say.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
	<ol class="carousel-indicators">
		<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
		<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
		<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="dist/img/slide1.jpg" alt="First slide">
			<div class="carousel-caption d-none d-md-block">
				<h5 class="text-white">First Slide Label</h5>
				<p>This is content paragraph enough to say.</p>
			</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="dist/img/slide2.jpg" alt="Second slide">
			<div class="carousel-caption d-none d-md-block">
				<h5 class="text-white">Second Slide Label</h5>
				<p>This is content paragraph enough to say.</p>
			</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="dist/img/slide3.jpg" alt="Third slide">
			<div class="carousel-caption d-none d-md-block">
				<h5 class="text-white">Third Slide Label</h5>
				<p>This is content paragraph enough to say.</p>
			</div>
		</div>
	</div>
	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

import React from 'react';
import { Carousel } from 'react-bootstrap';
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide3 from '../../../Assets/dist/img/slide3.jpg';
const BsCarousel = () => {
  return (
    <Carousel>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide1}
                alt="First slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">First slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide2}
                alt="Second slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">Second slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide3}
                alt="Third slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">Third slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
    </Carousel>
  );
}
export default BsCarousel;

import React from 'react';
import { Carousel } from 'react-bootstrap';
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide3 from '../../../Assets/dist/img/slide3.jpg';
const BsCarousel = () => {
  return (
    <Carousel>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide1}
                alt="First slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">First slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide2}
                alt="Second slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">Second slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
            <img
                className="d-block w-100"
                src={slide3}
                alt="Third slide"
            />
            <Carousel.Caption>
                <h5 className="text-white">Third slide label</h5>
                <p>This is content paragraph enough to say.</p>
            </Carousel.Caption>
        </Carousel.Item>
    </Carousel>
  );
}
export default BsCarousel;

<template>
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
            <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" :src="slide1" alt="First slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5 class="text-white">First Slide Label</h5>
                    <p>This is content paragraph enough to say.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" :src="slide2" alt="Second slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5 class="text-white">Second Slide Label</h5>
                    <p>This is content paragraph enough to say.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" :src="slide3" alt="Third slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5 class="text-white">Third Slide Label</h5>
                    <p>This is content paragraph enough to say.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</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>

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

<script>
  //Img
  import slide1 from "../../../assets/img/slide1.jpg";
  import slide2 from "../../../assets/img/slide2.jpg";
  import slide3 from "../../../assets/img/slide3.jpg";
</script>
<div class="container py-3">
      <div class="row">
        <div class="col">
          <div
            id="carouselExampleIndicators"
            class="carousel slide"
            data-bs-ride="carousel"
          >
            <ol class="carousel-indicators">
              <li
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="0"
                class="active"
              ></li>
              <li
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="1"
              ></li>
              <li
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="2"
              ></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src={slide1} alt="First slide" />
                <div class="carousel-caption d-none d-md-block">
                  <h5 class="text-white">First Slide Label</h5>
                  <p>This is content paragraph enough to say.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src={slide2} alt="Second slide" />
                <div class="carousel-caption d-none d-md-block">
                  <h5 class="text-white">Second Slide Label</h5>
                  <p>This is content paragraph enough to say.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src={slide3} alt="Third slide" />
                <div class="carousel-caption d-none d-md-block">
                  <h5 class="text-white">Third Slide Label</h5>
                  <p>This is content paragraph enough to say.</p>
                </div>
              </div>
            </div>
            <a
              class="carousel-control-prev"
              href="#carouselExampleIndicators"
              role="button"
              data-bs-slide="prev"
            >
              <span class="carousel-control-prev-icon" aria-hidden="true"
              ></span>
              <span class="sr-only">Previous</span>
            </a>
            <a
              class="carousel-control-next"
              href="#carouselExampleIndicators"
              role="button"
              data-bs-slide="next"
            >
              <span class="carousel-control-next-icon" aria-hidden="true"
              ></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>

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.

<div id="owl_demo_1" class="owl-carousel owl-theme">
<div class="item"><img src="dist/img/slide2.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide4.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide5.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide1.jpg" alt="Owl Image"></div>
</div>

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide4 from '../../../Assets/dist/img/slide4.jpg';
import slide5 from '../../../Assets/dist/img/slide5.jpg';
const BasicSwiperCarousel = () => {
  return (
    <Swiper
        lazy={true}
        pagination={{
            dynamicBullets: true,
        }}
        modules={[Pagination, Lazy]}
    >
        <SwiperSlide><img src={slide2} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide4} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide5} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide1} alt="Swiper content" /></SwiperSlide>
    </Swiper>
  );
}
export default BasicSwiperCarousel;

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide4 from '../../../Assets/dist/img/slide4.jpg';
import slide5 from '../../../Assets/dist/img/slide5.jpg';
const BasicSwiperCarousel = () => {
  return (
    <Swiper
        lazy={true}
        pagination={{
            dynamicBullets: true,
        }}
        modules={[Pagination, Lazy]}
    >
        <SwiperSlide><img src={slide2} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide4} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide5} alt="Swiper content" /></SwiperSlide>
        <SwiperSlide><img src={slide1} alt="Swiper content" /></SwiperSlide>
    </Swiper>
  );
}
export default BasicSwiperCarousel;

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

<script>
  import { onMount } from "svelte";
  import Swiper from "swiper/bundle";
  import { Pagination } from "swiper/modules";
  // Import Swiper styles
  import "swiper/css/pagination";
  //images
  import slide1 from "../../../assets/img/slide1.jpg";
  import slide2 from "../../../assets/img/slide2.jpg";
  import slide4 from "../../../assets/img/slide4.jpg";
  import slide5 from "../../../assets/img/slide5.jpg";
  let swiper;
  onMount(() => {
    setTimeout(() => {
      swiper = new Swiper(".bsswiper", {
        // Swiper options here (e.g., navigation, pagination)
        modules: [Pagination],
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
        },
      });
    }, 200);
    return () => {
      // Clean up on unmount
      swiper.destroy(true, true);
    };
  });
</script>
<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>

<script>
  import { onMount } from "svelte";
  import Swiper from "swiper/bundle";
  import { Pagination } from "swiper/modules";
  // Import Swiper styles
  import "swiper/css/pagination";
  //images
  import slide1 from "../../../assets/img/slide1.jpg";
  import slide2 from "../../../assets/img/slide2.jpg";
  import slide4 from "../../../assets/img/slide4.jpg";
  import slide5 from "../../../assets/img/slide5.jpg";
  let swiper;
  onMount(() => {
    setTimeout(() => {
      swiper = new Swiper(".bsswiper", {
        // Swiper options here (e.g., navigation, pagination)
        modules: [Pagination],
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
        },
      });
    }, 200);
    return () => {
      // Clean up on unmount
      swiper.destroy(true, true);
    };
  });
</script>
<div class="container py-3">
      <div class="row">
        <div class="col">
          <div class="swiper bsswiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src={slide1} alt="Swiper content" />
              </div>
              <div class="swiper-slide">
                <img src={slide2} alt="Swiper content" />
              </div>
              <div class="swiper-slide">
                <img src={slide4} alt="Swiper content" />
              </div>
              <div class="swiper-slide">
                <img src={slide5} alt="Swiper content" />
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>

Responsive Swiper carousel

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

<div id="owl_demo_2" class="owl-carousel owl-theme">
  <div class="item"><img src="dist/img/slide1.jpg" alt="Owl Image"></div>
  <div class="item"><img src="dist/img/slide2.jpg" alt="Owl Image"></div>
  <div class="item"><img src="dist/img/slide3.jpg" alt="Owl Image"></div>
  <div class="item"><img src="dist/img/slide4.jpg" alt="Owl Image"></div>
  <div class="item"><img src="dist/img/slide5.jpg" alt="Owl Image"></div>
  <div class="item"><img src="dist/img/slide6.jpg" alt="Owl Image"></div>
</div>

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide3 from '../../../Assets/dist/img/slide3.jpg';
import slide4 from '../../../Assets/dist/img/slide4.jpg';
import slide5 from '../../../Assets/dist/img/slide5.jpg';
import slide6 from '../../../Assets/dist/img/slide6.jpg';
const ResponsiveSwiperCarousel = () => {
  return (
    <Swiper
        lazy={true}
        pagination={{
            clickable: true,
        }}
        breakpoints={{
            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,
            },
        }}
        modules={[Pagination, Lazy]}
        className="swiper-carousel"
    >
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide1} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide2} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide3} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide4} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide5} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide6} alt="Swiper content" />
        </SwiperSlide>
    </Swiper>
  );
}
export default ResponsiveSwiperCarousel;

import React from 'react';
//Swiper Carousel
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Lazy } from 'swiper';
import "swiper/css/pagination";
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
import slide3 from '../../../Assets/dist/img/slide3.jpg';
import slide4 from '../../../Assets/dist/img/slide4.jpg';
import slide5 from '../../../Assets/dist/img/slide5.jpg';
import slide6 from '../../../Assets/dist/img/slide6.jpg';
const ResponsiveSwiperCarousel = () => {
  return (
    <Swiper
        lazy={true}
        pagination={{
            clickable: true,
        }}
        breakpoints={{
            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,
            },
        }}
        modules={[Pagination, Lazy]}
        className="swiper-carousel"
    >
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide1} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide2} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide3} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide4} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide5} alt="Swiper content" />
        </SwiperSlide>
        <SwiperSlide className='swiper-item swiper-content'>
            <img height={"auto"} src={slide6} alt="Swiper content" />
        </SwiperSlide>
    </Swiper>
  );
}
export default ResponsiveSwiperCarousel;

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

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

<script>
  import { onMount } from "svelte";
  import Swiper from "swiper/bundle";
  import { Pagination } from "swiper/modules";
  // Import Swiper styles
  import "swiper/css/pagination";
  //images
  import slide1 from "../../../assets/img/slide1.jpg";
  import slide2 from "../../../assets/img/slide2.jpg";
  import slide3 from "../../../assets/img/slide3.jpg";
  import slide4 from "../../../assets/img/slide4.jpg";
  import slide5 from "../../../assets/img/slide5.jpg";
  import slide6 from "../../../assets/img/slide6.jpg";
  //swiper init
  let swiper;
  onMount(() => {
    setTimeout(() => {
      swiper = new Swiper(".res-carousel", {
        // Swiper options here (e.g., navigation, pagination)
        modules: [Pagination],
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        breakpoints: {
          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 },
        },
      });
    }, 300);
    return () => {
      // Clean up on unmount
      swiper.destroy(true, true);
    };
  });
</script>
    <div class="container py-3">
      <div class="row">
        <div class="col">
          <div class="swiper res-carousel swiper-carousel">
            <div class="swiper-wrapper">
              <div class="swiper-slide swiper-content">
                <img src={slide1} alt="Swiper content" />
              </div>
              <div class="swiper-slide swiper-content">
                <img src={slide2} alt="Swiper content" />
              </div>
              <div class="swiper-slide swiper-content">
                <img src={slide3} alt="Swiper content" />
              </div>
              <div class="swiper-slide swiper-content">
                <img src={slide4} alt="Swiper content" />
              </div>
              <div class="swiper-slide swiper-content">
                <img src={slide5} alt="Swiper content" />
              </div>
              <div class="swiper-slide swiper-content">
                <img src={slide6} alt="Swiper content" />
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>

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.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

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 9, 2022

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 11, 2022

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

React-Bootstrap Carousel
Basic Swiper Carousel
Responsive Swiper carousel
Card Carousel
Auto Height Carousel