JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://lamedkz.tmweb.ru/tmpl/css/idangerous.swiper.scrollbar.css">
<link rel="stylesheet" href="http://lamedkz.tmweb.ru/tmpl/css/idangerous.swiper.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.scrollbar.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
          Slide 1
      </div>
      <div class="swiper-slide blue-slide">
        Slide 2
      </div>
      <div class="swiper-slide orange-slide">
        Slide 3
      </div>
      <div class="swiper-slide blue-slide">
        Slide 4
      </div>
    </div>
  </div>
  <div class="swiper-scrollbar"></div>

CSS

body {
  margin: 0;
}
.swiper-container {
  width: 880px;
  height: 200px;
}
.swiper-slide {
  color:#fff;
  font-size:25px;
  text-align:center;
  line-height:200px;
}
.swiper-scrollbar {
  height:10px;
  margin:20px auto;
  width: 880px;
}
.red-slide {
  background:#900;
}
.blue-slide {
  background:#06C;
}
.orange-slide {
  background:#F63;
}

JavaScript

$(function(){
	
  var mySwiper = new Swiper('.swiper-container',{
    //Enable Scrollbar
    scrollbar: {
      container :'.swiper-scrollbar',
      hide: false,
      draggable: true
    }
  });
	
	
});