Initialize a swiper slider via data-toggle="swiper"
and pass through the options object via data-options
attribute.
<div class="swiper-container" data-toggle="swiper" data-options='{"breakpoints": { "768": { "slidesPerView": 2 }, "1200": { "slidesPerView": 3 }, "2000": { "slidesPerView": 4 } }, "freeMode": true, "grabCursor": true, "speed": 500, "navigation": { "nextEl": ".swiper-custom-button-next", "prevEl": ".swiper-custom-button-prev" } }'>
<div class="swiper-wrapper">
<div class="swiper-slide">
...
</div>
<div class="swiper-slide">
...
</div>
<div class="swiper-slide">
...
</div>
</div>
<!-- Pagination -->
<div class="container">
<div class="d-flex align-items-center justify-content-center justify-content-md-end">
<a href="#" class="swiper-custom-button-prev text-dark">
<i class="fas fa-arrow-left fa-lg"></i>
</a>
<a href="#" class="swiper-custom-button-next ms-4 text-dark">
<i class="fas fa-arrow-right fa-lg"></i>
</a>
</div>
</div>
</div>
Lead Philosoper
Head of Philosophy
Senior Philosoper
<div class="swiper-container" data-toggle="swiper" data-options='{ "slidesPerView": "auto", "centeredSlides": true, "grabCursor": true, "speed": 500, "navigation": { "nextEl": ".swiper-custom-button-next", "prevEl": ".swiper-custom-button-prev" } }'>
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide container">
...
</div>
<div class="swiper-slide container">
...
</div>
<div class="swiper-slide container">
...
</div>
</div>
<!-- Pagination -->
<div class="container">
<div class="d-flex align-items-center justify-content-center justify-content-md-end">
<a href="#" class="swiper-custom-button-prev text-dark">
<i class="fas fa-arrow-left fa-lg"></i>
</a>
<a href="#" class="swiper-custom-button-next ms-4 text-dark">
<i class="fas fa-arrow-right fa-lg"></i>
</a>
</div>
</div>
</div>