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-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 mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    momentumRatio: 1,
    queueEndCallbacks: true,
    freeMode: true,
    freeModeFluid: true,
    onTouchEnd: function () {
        setTimeout(function () {
            if (Math.abs(mySwiper.positions.current) % 320.0 < 160) {
                mySwiper.swipePrev();
            } else {
                mySwiper.swipeNext();
            }
            console.log(Math.abs(mySwiper.positions.current) % 320.0);
        }, 500);
    },
})