JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js"></script>
<div class="example" data-jcarousel="true">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

<p class="jcarousel-pagination" data-jcarouselautoscroll="true" data-jcarouselpagination="true"></p>
</div>

CSS

.example{ width:500px; overflow:hidden}
ul{list-style: outside none none;margin: 0;padding: 0;position: relative;width: 20000em}
li{ float:left; width:500px; background:#ff0000}
.active{color:#ff0000}

JavaScript

function mycarousel_initCallback(carousel)
    {
        carousel.clip.hover(function() {
            carousel.startAuto();
        }, function() {
            carousel.stopAuto();
            
        });
    };

(function(A) {
    A(function() {
        A(".example").jcarousel({
            auto: 1,
            wrap: "last",
            initCallback:mycarousel_initCallback

        });
       
        A(".jcarousel-control-prev").on("jcarouselcontrol:active", function() {
            A(this).removeClass("inactive")
        }).on("jcarouselcontrol:inactive", function() {
            A(this).addClass("inactive")
        }).jcarouselControl({
            target: "-=1"
        });
        A(".jcarousel-control-next").on("jcarouselcontrol:active", function() {
            A(this).removeClass("inactive")
        }).on("jcarouselcontrol:inactive", function() {
            A(this).addClass("inactive")
        }).jcarouselControl({
            target: "+=1"
        });
        A(".jcarousel-pagination").on("jcarouselpagination:active", "a", function() {
            A(this).addClass("active")
        }).on("jcarouselpagination:inactive", "a", function() {
            A(this).removeClass("active")
        }).jcarouselPagination()
    });
   
   
})(jQuery);