JSFiddle - React, Tailwind, and code Playground

by John Miltone

HTML

<script src="https://raw.github.com/jsor/jcarousel/master/dist/jquery.jcarousel.min.js"></script>
<div class="carousel">
    <ul class="thumbnails">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<div class="controls"> 
    <a class="jcarousel-prev" href="#">Prev</a>
    <a class="jcarousel-next" href="#">Next</a>
</div>

CSS

.carousel {
    position: relative;
    width: 580px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}
ul {
    width: 20000em;
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0 0 0 -20px;
}
li {
    float: left;
    margin-left: 20px;
    height: 100px;
    width: 100px;
    background-color: #202020;
}
li:last-child {
    background-color: red;
}

JavaScript

$(function () {
    $('.carousel').jcarousel({
        wrap: 'both',
        center: true
    });
    
    $('.jcarousel-prev').jcarouselControl({
        target: '-=1'
    });
    
    $('.jcarousel-next').jcarouselControl({
        target: '+=1'
    });
});