JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<script src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js"></script>
<div class="jcarousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
<a href="#" class="jcarousel-control-next">&rsaquo;</a>

CSS

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 400px;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    float: left;
}

JavaScript

$('.jcarousel').jcarousel({wrap: 'circular'});

$('.jcarousel').on('jcarousel:targetin', 'li', function() {
    $(this).parents('.jcarousel').find('> ul > li').removeClass('active');
    $(this).addClass('active');
});

$('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });