Guest User

Swiper Effect Card HTML

a guest
Jul 20th, 2024
33
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.07 KB | Source Code | 0 0
  1. <div class="swiper">
  2.       <!-- Additional required wrapper -->
  3.       <div class="swiper-wrapper">
  4.         <!-- Slides -->
  5.         <div class="swiper-slide" >
  6.  
  7.             <div class="highlighted" >
  8.                   <div class="highlight1"></div>
  9.                   <img class="image-container1" alt="" src="img/events/jer.webp">
  10.                   <div class="text-container4">
  11.                       <div class="event-date1">Jer, Pollyanna</div>
  12.                       <i class="timezone1">10:00 PM EDT</i>
  13.                       <div class="event-venue1">Comet Ping Pong</div>
  14.                   </div>
  15.                   <div class="highlight-date-box1">
  16.                       <div class="month1">AUG</div>
  17.                       <div class="date1">30</div>
  18.                   </div>
  19.             </div>
  20.  
  21. </div>
  22.  
  23.     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  24.  
  25.     <script>
  26.      
  27.       const swiper = new Swiper('.swiper', {
  28.       effect: 'cards',
  29.       cardsEffect: {
  30.         // ...
  31.       },
  32.      
  33.     });
  34.     </script>
Advertisement
Add Comment
Please, Sign In to add comment