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 CSS and JS. (Note: if you are using our dist folder then will get libs folder in it.)
assets/libs/swiper/swiper-bundle.min.css
assets/libs/swiper/swiper-bundle.min.js
assets/js/vendors/swiper.js
assets/libs/swiper/swiper-bundle.min.js
assets/js/vendors/swiper.js
Note that this component requires the use of the third-party
Swiper js
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>