JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://mctenshi.github.io/infinite-swipe/swipe.js"></script>
<link rel="stylesheet" href="https://mctenshi.github.io/infinite-swipe/swipe.css">
<div class="stage">
    <ul class="target">
        <li><img alt="" src="https://api.recopick.com/i/prd_sample/1.png" width="300" height="300"></li>
        <li><img alt="" src="https://api.recopick.com/i/prd_sample/3.png" width="300" height="300"></li>
        <li><img alt="" src="https://api.recopick.com/i/prd_sample/5.png" width="300" height="300"></li>
    </ul>
    <div class="prev"></div>
    <div class="pages">
        <strong class="curr">1</strong>
        /
        <span class="total">3</span>
    </div>
    <div class="next"></div>
</div>

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.stage {
    
    width: 300px;
    height: 400px;
    overflow: hidden;
    background: #ddd;
}
.target {
    width: 900px;
}
.target li {
    float: left;
}

    .prev{cursor:pointer;position:absolute;top:350px;left:50px;width:47px;height:25px;background:url(http://mctenshi.github.io/recopick-swipe/images/prev.png) no-repeat 0 0;}
.prev.disabled{cursor:default;opacity:.3}
 .next{cursor:pointer;position:absolute;top:350px;right:50px;width:47px;height:25px;background:url(http://mctenshi.github.io/recopick-swipe/images/next.png) no-repeat 0 0;}
.next.disabled{cursor:default;opacity:.3}

.pages {position:absolute;top:350px;left:100px;width:100px;text-align:center;}
.curr {color:red}

JavaScript

$('.stage').infiniteSwipe({
    $target: $('.target'),
    total: 3,
    $prev: $('.prev'),
    $next: $('.next'),
    $curr: $('.curr')
});