JSFiddle - React, Tailwind, and code Playground

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-wrapper {
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
}
.transition {
    background:white;
}
.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 mouseClick = false;
var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    momentumRatio: 1,
    freeMode: true,
    freeModeFluid: true,
    onTouchEnd: function () {
        mouseClick = true;
        $('.swiper-wrapper').toggleClass('transition');
    },
})

$(".swiper-wrapper").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
    if (mouseClick) {
        if (Math.abs(mySwiper.positions.current) % 320.0 < 160) {
            mySwiper.swipePrev();
        } else {
            mySwiper.swipeNext();
        }
        mouseClick = false;
    }
});