JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
  </div>
  <div class="slider-scrollbar noUi-target noUi-ltr noUi-horizontal"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 300px;
  border: 1px black solid;
}

.swiper-slide {
  text-align: center;
  height: 100px;
  width: 100px;
  background-color: red;
  border: 1px black solid;
}

JavaScript

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  speed: 1000,
  autoplay: {
    delay: 0,
  },
  on: {
    reachEnd: function() {
      this.params.autoplay.reverseDirection = true;
    },
    reachBeginning: function() {
      this.params.autoplay.reverseDirection = false;
    }
  }
});