Tailwind CSS Swiper - Versoly UI

<div class="swiper-container relative">
  <div class="swiper" data-toggle="swiper" data-options="{'slidesPerView':1}">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-primary-100">
                  <h2>Slide 1</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-secondary-100">
                  <h2>Slide 2</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-warning-100">
                  <h2>Slide 3</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-success-100">
                  <h2>Slide 4</h2>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="swiper-container relative">
  <div class="swiper" data-toggle="swiper" data-options="{'slidesPerView':1, 'navigation':{'prevEl':'.swiper-button-prev','nextEl':'.swiper-button-next'}}">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-primary-100">
                  <h2>Slide 1</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-secondary-100">
                  <h2>Slide 2</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-warning-100">
                  <h2>Slide 3</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-success-100">
                  <h2>Slide 4</h2>
              </div>
          </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
</div>

<div class="swiper-container relative">
  <div class="swiper" data-toggle="swiper" data-options="{'slidesPerView':1, 'breakpoints':{'1024':{'slidesPerView':2,'slidesPerGroup':2}}, 'navigation':{'prevEl':'.swiper-button-prev','nextEl':'.swiper-button-next'}}">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-primary-100">
                  <h2>Slide 1</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-secondary-100">
                  <h2>Slide 2</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-warning-100">
                  <h2>Slide 3</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-success-100">
                  <h2>Slide 4</h2>
              </div>
          </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
</div>

<div class="swiper-container relative">
  <div class="swiper" data-toggle="swiper" data-options="{'slidesPerView':1,'pagination':{'el':'.swiper-pagination','clickable':true,'renderBullet':'number','bulletClass':'swiper-pagination-bullet w-8 h-8 flex justify-center items-center text-base text-center text-dark opacity-100 bg-primary-300/40 rounded-full cursor-pointer','bulletActiveClass':'swiper-pagination-bullet-active bg-primary-600 text-white'},'spaceBetween':16,'breakpoints':{'1024':{'slidesPerView':2,'slidesPerGroup':2}},'navigation':{'prevEl':'.swiper-button-prev','nextEl':'.swiper-button-next'}}">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-primary-100">
                  <h2>Slide 1</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-secondary-100">
                  <h2>Slide 2</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-warning-100">
                  <h2>Slide 3</h2>
              </div>
          </div>
          <div class="swiper-slide">
              <div class="h-64 flex justify-center items-center bg-success-100">
                  <h2>Slide 4</h2>
              </div>
          </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
  <div class="swiper-pagination static mt-2 flex flex-row justify-center gap-x-2 w-full"></div>
</div>