JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.4/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.4/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    
    

</div>

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

CSS

.swiper-container {
    width: 240%;
    height: 500px;
    position: relative;
    left: -70%;
}

.swiper-slide{
    text-align: center;
    -webkit-transition: all 1s ease;
}
.swiper-slide-prev, .swiper-slide-next {
    background: #ccc;
}
.swiper-slide-active {
    background: white;
}

JavaScript

var mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,

      // If we need pagination
      pagination: '.swiper-pagination',
      slidesPerView: 3,
      centeredSlides: true,
      // Navigation arrows
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
  })