Swiper Effect Card HTML

<div class="swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" >

            <div class="highlighted" >
                  <div class="highlight1"></div>
                  <img class="image-container1" alt="" src="img/events/jer.webp">
                  <div class="text-container4">
                      <div class="event-date1">Jer, Pollyanna</div>
                      <i class="timezone1">10:00 PM EDT</i>
                      <div class="event-venue1">Comet Ping Pong</div>
                  </div>
                  <div class="highlight-date-box1">
                      <div class="month1">AUG</div>
                      <div class="date1">30</div>
                  </div>
            </div>

</div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script>

      const swiper = new Swiper('.swiper', {
      effect: 'cards',
      cardsEffect: {
        // ...
      },

    });
    </script>