JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 01</div>
      <div class="swiper-slide">Slide 02</div>
      <div class="swiper-slide">Slide 03</div>
      <div class="swiper-slide">Slide 04</div>
      <div class="swiper-slide">Slide 05</div>
      <div class="swiper-slide">Slide 06</div>
      <div class="swiper-slide">Slide 07</div>
      <div class="swiper-slide">Slide 08</div>
      <div class="swiper-slide">Slide 09</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>
</div>
</body>
</html>

SCSS

body, html{
  height:100%;
}

.wrapper {
  width: 400px;
  height: 230px;
  margin: 100px auto 0;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide{
  width: 100%;
  height: 100%;
}
 .swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #D8E2DC;
   
   &:nth-child(2n) {
  background: #1abc9c;
   }
}

JavaScript

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  mousewheelControl: true,
  slidesPerView: 3,
});