JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css">
  <div class="product-carousel">
    <div class="swiper-container">
		
		
      <div class="swiper-wrapper">
			
        <div class="swiper-slide">
          <img src="https://bonmedico.de/wp-content/uploads/2020/02/comfort_cushion.png">
        </div>

        <div class="swiper-slide">
          <img src="https://bonmedico.de/wp-content/uploads/2020/02/h%C3%A4morrhoiden_kissen.png">
        </div>

        <div class="swiper-slide">
          <img src="https://bonmedico.de/wp-content/uploads/2020/02/r%C3%BCckenkissen.png">
        </div>


        <div class="swiper-slide">
          <img src="https://bonmedico.de/wp-content/uploads/2020/02/r%C3%BCckenkissen.png">
        </div>



      </div>
  <div class="swiper-pagination"></div>
    </div>

    <div class="swiper-button-next nav-btn"></div>
    <div class="swiper-button-prev nav-btn"></div>
  </div>


  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">


  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

CSS

.swiper-container .swiper-button-prev,
    .swiper-container .swiper-button-next {
      top: 120px;
    }

    body {
      font-family: arial;
      color: #7E7B79;
    }

    .product-carousel .nav-btn {
      color: #6BAAD9;
      outline: none;
    }

    .product-carousel {

      padding: 20px;
      position: relative;
      height: 350px;
    }

    .swiper-slide {
      text-align: center;
    }


    .swiper-slide .title {
      display: block;
    }

    .swiper-slide .info-btn {
      display: block;
      margin: auto;
      color: #ffffff;
      font-size: 18px;
      border: none;
      background-color: #f92c55;
      padding: 10px 40px;
      margin-top: 10px;
      cursor: pointer;

    }

    .swiper-slide img {
      width: 100%;
      max-width: 300px;
    }


.swiper-slide .fold {
  margin-top: 10px;
  opacity: 0;
/*   transition: opacity 1s; */
}
  
.swiper-slide .fold.open {
  opacity: 1;
}

    @media screen and (max-width: 576px) {
      .product-carousel {
        width: 100%;

      }

      .swiper-slide .price::after {
        content: "\f107";
        font-family: 'FontAwesome';
        display: block;
        font-size: 30px !important;
        color: #ff5a5f;
        font-weight: bold !important;

        animation-name: example;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }


      @keyframes example {
        0% {
          transform: scale(0.8, 0.8);
        }

        100% {
          transform: scale(1.5, 1.5);
        }
      }

    }

JavaScript

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 10,
  // init: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    640: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
  }
});