Swiper Example

example.html

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

<!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
         <div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440866*Slide3*jpg?alt=media&token=7eb8afaf-c931-4665-a2b8-9edad704b5c5" />
</div>

  <div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440869*Slide6*jpg?alt=media&token=7c182bef-6a1b-4891-8127-3599e3b0cbca" />
</div>

  <div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440870*Slide7*jpg?alt=media&token=9c01c234-b1de-4dc3-a9a5-39cf0e772156" />
</div>
  
  <div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440865*Slide2*jpg?alt=media&token=0aadc66b-8159-46f8-b497-db9c56974296" />
</div>
  
  <div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440868*Slide5*jpg?alt=media&token=95119e55-8246-4b8d-99ec-db9fbdd90836" />
</div>

<div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440871*Slide8*jpg?alt=media&token=50c8409f-4cde-4706-97c7-5588f0ef255f" />
</div>


<div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440867*Slide4*jpg?alt=media&token=3a18cec2-55f6-4cdb-8fe3-cc278da5474d" />
</div>


<div class="swiper-slide tc"><img src="https://firebasestorage.googleapis.com/v0/b/phonesites-prod.appspot.com/o/images%2FUZCKxREA6sNku9tDPHVFxd5PSrG3%2F1672423440860*Slide1*jpg?alt=media&token=602f7be8-bbe5-4795-a5e8-b513c1cfde68" />
</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>