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.
<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-10 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">
<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">
<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">
<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
start-50 translate-middle me-4 pb-5">
<div class="swiper-button-prev ms-n3"></div>
<div class="swiper-button-next ms-6"></div>
</div>
</div>
</div>
</div> <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>