Carousel (Slider)
A slideshow component for cycling through elements (images or slides with various content) like a carousel.
The Carousel component relies on the Swiper plugin. To use a carousel, make sure to include the required reference to the plugin's .css and .js files.
CSS file is linked in the <head> section and above theme.min.css reference in your document:
<link rel="stylesheet" href="assets/vendor/swiper/swiper-bundle.min.css">JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>You can apply virtually any slider option by specifying it within the data-swiper="{}" attribute in JSON format.
Usefull links:
Pagination
<!-- Pagination: Bullets -->
<div class="swiper hover-effect-opacity" data-swiper='{
"spaceBetween": 20,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Prev button -->
<div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 hover-effect-target opacity-0">
<button type="button" class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
</div>
<!-- Next button -->
<div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 hover-effect-target opacity-0">
<button type="button" class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
</div>
<!-- Bullets -->
<div class="swiper-pagination"></div>
</div>
<!-- Pagination: Progress bar -->
<div class="swiper hover-effect-opacity" data-swiper='{
"spaceBetween": 20,
"pagination": {
"el": ".swiper-pagination",
"type": "progressbar"
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Prev button -->
<div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 hover-effect-target opacity-0">
<button type="button" class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
</div>
<!-- Next button -->
<div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 hover-effect-target opacity-0">
<button type="button" class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
</div>
<!-- Progress bar -->
<div class="swiper-pagination"></div>
</div>
<!-- Pagination: Fraction -->
<div class="swiper hover-effect-opacity" data-swiper='{
"spaceBetween": 20,
"pagination": {
"el": ".swiper-pagination",
"type": "fraction"
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Prev button -->
<div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 hover-effect-target opacity-0">
<button type="button" class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
</div>
<!-- Next button -->
<div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 hover-effect-target opacity-0">
<button type="button" class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
</div>
<!-- Fraction -->
<div class="swiper-pagination text-body-secondary fs-6 opacity-50 fw-semibold mb-2"></div>
</div>
<!-- Pagination: Scrollbar -->
<div class="swiper" data-swiper='{
"direction": "vertical",
"mousewheel": true,
"spaceBetween": 20,
"scrollbar": {
"el": ".swiper-scrollbar"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Scrollbar -->
<div class="swiper-scrollbar"></div>
</div>Multiple slides per view (Responsive)
<!-- Responsive slider with multiple slides, featuring external Prev/Next buttons and bullets positioned outside the slider. -->
<div class="position-relative px-5">
<!-- External slider prev/next buttons -->
<button type="button" id="prev" class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start position-absolute top-50 start-0 translate-middle-y mt-n3" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
<button type="button" id="next" class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end position-absolute top-50 end-0 translate-middle-y mt-n3" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
<!-- Slider -->
<div class="swiper px-2" data-swiper='{
"slidesPerView": 1,
"spaceBetween": 16,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": "#prev",
"nextEl": "#next"
},
"breakpoints": {
"600": {
"slidesPerView": 2
},
"1000": {
"slidesPerView": 3
}
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-info-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-success-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-danger-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">3</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">4</div>
</div>
</div>
</div>
<!-- Pagination (Bullets) -->
<div class="swiper-pagination position-static mt-3"></div>
</div>
</div>Fade transition
<!-- A slider that features a smooth fade transition between slides -->
<div class="swiper hover-effect-opacity" data-swiper='{
"effect": "fade",
"loop": true,
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide rounded">
<div class="ratio ratio-16x9 bg-info-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">First</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide rounded">
<div class="ratio ratio-16x9 bg-danger-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Second</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide rounded">
<div class="ratio ratio-16x9 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Third</div>
</div>
</div>
</div>
<!-- Prev button -->
<div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 ms-sm-4 hover-effect-target opacity-0">
<button type="button" class="btn btn-prev btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-start" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
</div>
<!-- Next button -->
<div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 me-sm-4 hover-effect-target opacity-0">
<button type="button" class="btn btn-next btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-end" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>Thumbnails
<!-- A slider equipped with thumbnails that allow users to control and navigate the main slider -->
<!-- Main slider -->
<div class="swiper hover-effect-opacity" data-swiper='{
"spaceBetween": 24,
"loop": true,
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
},
"thumbs": {
"swiper": "#thumbs"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-primary-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-success-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-danger-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">4</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-info-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">5</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-body-tertiary rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">6</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">7</div>
</div>
</div>
</div>
<!-- Prev button -->
<div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 ms-sm-4 hover-effect-target opacity-0">
<button type="button" class="btn btn-prev btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-start" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
</div>
<!-- Next button -->
<div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 me-sm-4 hover-effect-target opacity-0">
<button type="button" class="btn btn-next btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-end" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>
<!-- Thumbnails slider -->
<div class="swiper swiper-load swiper-thumbs pt-2 mt-1" id="thumbs" data-swiper='{
"loop": true,
"spaceBetween": 12,
"slidesPerView": 3,
"watchSlidesProgress": true,
"breakpoints": {
"340": {
"slidesPerView": 4
},
"500": {
"slidesPerView": 5
},
"600": {
"slidesPerView": 6
},
"768": {
"slidesPerView": 4
},
"992": {
"slidesPerView": 5
},
"1200": {
"slidesPerView": 6
}
}
}'>
<div class="swiper-wrapper">
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-primary-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">1</div>
</div>
</div>
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-success-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">2</div>
</div>
</div>
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">3</div>
</div>
</div>
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-danger-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">4</div>
</div>
</div>
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-info-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">5</div>
</div>
</div>
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-body-tertiary rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">6</div>
</div>
</div>
<div class="swiper-slide swiper-thumb">
<div class="ratio ratio-1x1 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">7</div>
</div>
</div>
</div>
</div>Synchronized sliders
<!-- Synchronized sliders example -->
<div class="row align-items-center">
<!-- Controlled slider -->
<div class="col-md-5 mb-4 mb-md-0 pb-1 pb-md-0">
<div class="swiper" id="images" data-swiper='{
"allowTouchMove": false,
"effect": "flip",
"flipEffect": {
"slideShadows": false
},
"loop": true
}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-success-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
<i class="fi-image text-success opacity-75"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-warning-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
<i class="fi-image text-warning opacity-75"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-info-subtle rounded">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
<i class="fi-image text-info opacity-75"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Master slider -->
<div class="col-md-7 ps-xl-5">
<div class="swiper" data-swiper='{
"spaceBetween": 32,
"loop": true,
"speed": 400,
"controlSlider": "#images",
"navigation": {
"prevEl": "#prev-btn",
"nextEl": "#next-btn"
}
}'>
<div class="swiper-wrapper text-center text-md-start">
<div class="swiper-slide">
<h3>First slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
</div>
<div class="swiper-slide">
<h3>Second slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
</div>
<div class="swiper-slide">
<h3>Third slide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center justify-content-md-start gap-2 pt-2">
<button type="button" class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1" id="prev-btn" aria-label="Prev">
<i class="fi-chevron-left fs-lg animate-target"></i>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle" id="next-btn" aria-label="Next">
<i class="fi-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>
</div>