JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>



<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
  
    <!-- Слайд -->
    <div class="swiper-slide">
      <figure>
        <img src="https://placeimg.com/300/300/any" alt="">
        <button>Кнопка</button>
        <button style="background: #fff;color: #000;border: 1px solid purple;margin-top: 10px;">Кнопка 2</button>
      </figure>
    </div>
    
    <!-- Слайд -->
    <div class="swiper-slide">
      <figure>
        <img src="https://placeimg.com/300/300/any" alt="">
        <button>Кнопка</button>
        <button style="background: #fff;color: #000;border: 1px solid purple;margin-top: 10px;">Кнопка 2</button>
      </figure>
    </div>
    
    <!-- Слайд -->
    <div class="swiper-slide">
      <figure>
        <img src="https://placeimg.com/300/300/any" alt="">
        <button>Кнопка</button>
        <button style="background: #fff;color: #000;border: 1px solid purple;margin-top: 10px;">Кнопка 2</button>
      </figure>
    </div>
    
    <!-- Слайд -->
    <div class="swiper-slide">
      <figure>
        <img src="https://placeimg.com/300/300/any" alt="">
        <button>Кнопка</button>
        <button style="background: #fff;color: #000;border: 1px solid purple;margin-top: 10px;">Кнопка 2</button>
      </figure>
    </div>
    
    <!-- Слайд -->
    <div class="swiper-slide">
      <figure>
        <img src="https://placeimg.com/300/300/any" alt="">
        <button>Кнопка</button>
        <button style="background: #fff;color: #000;border: 1px solid purple;margin-top: 10px;">Кнопка 2</button>
      </figure>
    </div>
    
    <!-- Слайд -->
    <div class="swiper-slide">
      <figure>
        <img src="https://placeimg.com/300/300/any" alt="">
        <button>Кнопка</button>
        <button style="background: #fff;color:...

CSS

/* Сбросы */

*, :before, :after {
  box-sizing: border-box;
}

body {
  margin: 30px;
  font-family: sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}


/* Для примера */

.swiper-pagination {
  position: static !important;
  margin-top: 10px;
}


/* Типа карточка */

figure {
  width: 100%;
  margin: 0;
  background-color: #fff;
  border: 1px solid purple;
  border-radius: 4px;
  padding: 10px;
}

figure img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}

figure button {
  background-color: purple;
  color: #fff;
  width: 100%;
  border: none;
  font-style: inherit;
  padding: .75em;
  line-height: 1;
  border-radius: 4px;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  spaceBetween: 10,
  breakpoints: {
    // when window width is <= 320px
    359: {
      slidesPerView: 1,
      spaceBetween: 0
    },
    // when window width is <= 480px
    600: {
      slidesPerView: 2,
      spaceBetween: 10
    },
    // when window width is <= 640px
    768: {
      slidesPerView: 3,
      spaceBetween: 10
    }
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});