Swiper
Swiper - is the free and most modern 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.
Requires JS.
assets/js/vendors/swiper.js
Note that this component requires the use of the third-party
swiper
plugin.
Swiper
<div class="row">
<div class="col-12">
<div
class="swiper-container swiper"
id="swiper-1"
data-pagination-type=""
data-speed="400"
data-space-between="100"
data-pagination="false"
data-navigation="true"
data-autoplay="true"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 1}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView": 2}, "1200": {"slidesPerView": 3}}'>
<div class="swiper-wrapper pb-8 pt-1">
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0 w-100">
<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>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0 w-100">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">2</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0 w-100">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">3</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0" style="width: 25rem">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">4</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0" style="width: 25rem">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">5</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0" style="width: 25rem">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">6</div>
</div>
</div>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-navigation position-absolute bottom-0 mb-5 start-lg-50">
<div class="swiper-button-prev me-7"></div>
<div class="swiper-button-next ms-7"></div>
</div>
</div>
</div>
</div>Swiper
<div class="row">
<div class="col-12">
<div
class="swiper-container swiper"
id="swiper-2"
data-pagination-type=""
data-speed="400"
data-space-between="100"
data-pagination="true"
data-navigation="false"
data-autoplay="true"
data-autoplay-delay="2000"
data-breakpoints='{"480": {"slidesPerView": 1}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView": 1}}'>
<div class="swiper-wrapper pb-6">
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0 w-100">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">1</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0 w-100">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">2</div>
</div>
</div>
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary position-relative border-0 w-100">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-6">3</div>
</div>
</div>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>