JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eurotruck.greendot.cz/js/jcarousel.js"></script>
<div class="jcarousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<a class="jcarousel-next" href="javascript:void(0)">prev</a>
<a class="jcarousel-prev" href="javascript:void(0)">next</a>

CSS

.jcarousel {
    position: relative;
    overflow: hidden;
    width:52px;
    height:50px;
    background-color: cyan;
}
.jcarousel ul {
    width: 270px;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    float: left;
    width:46px;
    background-color: yellow;
    height:34px;
    text-align:center;
    padding-top:10px;
    border: 1px solid gray;
    margin: 2px;
}

JavaScript

$('.jcarousel-next').click(function () {
        $('.jcarousel').jcarousel({
			  scroll: -1,
			  auto: 1,
			  wrap: "circular"
		});
    });

    $('.jcarousel-prev').click(function () {
        $('.jcarousel').jcarousel({
			  scroll: 1,
			  auto: 1,
			  wrap: "circular"
		});
    });