JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script>
<button class="prev"><<</button>
<button class="next">>></button>
        
<div class="anyClass">
    <ul>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
    </ul>
</div>

CSS

.anyClass {
    position: absolute;
    width: 300px; height: 110px;
    left: 50px; top: 50px;
    background: red;
}

li img {
    margin: 5px;
}

JavaScript

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        scroll: 3,
        speed: 800
    });
});