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 ml-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 ml-4 text-dark">
                              <i class="fas fa-arrow-right fa-lg"></i>
                          </a>
                      </div>
                  </div>
              </div>