Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Read the
official
Bootstrap Documentation for a full list of
instructions
and other options.
Example With captions
Add captions to your slides easily with the .carousel-caption element within any
.carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional
display utilities. We hide them initially with
.d-none and
bring them back on medium-sized devices with .d-md-block.
<div id="carouselExample" class="carousel slide col-md-8 offset-md-2" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/elements/10.jpg" alt="First slide" />
<div class="carousel-caption d-none d-md-block">
<h4>First slide</h4>
<p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/elements/2.jpg" alt="Second slide" />
<div class="carousel-caption d-none d-md-block">
<h4>Second slide</h4>
<p>In numquam omittam sea.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/elements/13.jpg" alt="Third slide" />
<div class="carousel-caption d-none d-md-block">
<h4>Third slide</h4>
<p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>Swiper
Swiper is the most modern mobile touch slider with hardware accelerated transitions.
Usage
In order to use swiper on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/swiper/swiper.css" />Include the following custom page level style in the "Page CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/css/pages/ui-carousel.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/swiper/swiper.js"></script>Include the following custom script in the "Page JS" area from the page's footer:
<script src="assets/js/ui-carousel.js"></script>Basic example
<div class="swiper" id="swiper-default">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(assets/img/elements/1.jpg)">Slide 1</div>
<div class="swiper-slide" style="background-image:url(assets/img/elements/5.jpg)">Slide 2</div>
<div class="swiper-slide" style="background-image:url(assets/img/elements/9.jpg)">Slide 3</div>
<div class="swiper-slide" style="background-image:url(assets/img/elements/7.jpg)">Slide 4</div>
<div class="swiper-slide" style="background-image:url(assets/img/elements/8.jpg)">Slide 5</div>
</div>
</div>