JSFiddle - React, Tailwind, and code Playground

by sathyaraj888

HTML

<script src="http://www.idangero.us/sliders/swiper/demos/main-demos/js/jquery-1.10.1.min.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/demos/main-demos/css/idangerous.swiper.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide red-slide">
            <div class="title">Slide 1</div>
        </div>
        <div class="swiper-slide blue-slide">
            <div class="title">Slide 2</div>
        </div>
        <div class="swiper-slide orange-slide">
            <div class="title">Slide 3</div>
        </div>
        <div class="swiper-slide green-slide">
            <div class="title">Slide 4</div>
        </div>
        <div class="swiper-slide pink-slide">
            <div class="title">Slide 5</div>
        </div>
        <div class="swiper-slide red-slide">
            <div class="title">Slide 6</div>
        </div>
        <div class="swiper-slide blue-slide">
            <div class="title">Slide 7</div>
        </div>
        <div class="swiper-slide orange-slide">
            <div class="title">Slide 8</div>
        </div>
    </div>
</div>

CSS

.swiper-container {
    width: 960px;
    height: 535px;
    color: #fff;
    text-align: center;
}
.red-slide {
    background: #ca4040;
}
.blue-slide {
    background: #4390ee;
}
.orange-slide {
    background: #ff8604;
}
.green-slide {
    background: #49a430;
}
.pink-slide {
    background: #973e76;
}
.swiper-slide .title {
    font-style: italic;
    font-size: 42px;
    margin-top: 80px;
    margin-bottom: 0;
    line-height: 45px;
}
.pagination {
    position: absolute;
    z-index: 20;
    left: 10px;
    bottom: 10px;
}
.swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #222;
    margin-right: 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
}
.swiper-visible-switch {
    background: #aaa;
}
.swiper-active-switch {
    background: #fff;
}

JavaScript

var forward = true;
 var pos = 0;
 var mySwiper = new Swiper('.swiper-container', {
     slidesPerView: 3,
     momentumRatio: 1,
     freeMode: true,
     freeModeFluid: true,
     onSlideChangeEnd: function (dir) {
         console.log(dir.activeIndex);
         if (dir.activeIndex > pos) {
             forward = true;
         } else {
             forward = false;
         }
         pos = dir.activeIndex;
     }
 })
 var perm = true;
 mySwiper.wrapperTransitionEnd(fun1, true);

 function fun1() {
     if (perm) {
         if (forward) {
             mySwiper.swipeNext();
         } else {
             mySwiper.swipePrev();
         }

         perm = false;
     } else {
         perm = true;
     }
 }