JSFiddle - React, Tailwind, and code Playground

by kuyabiye

HTML

<script src="http://caroufredsel.frebsite.nl/js/jquery/jquery.carouFredSel-5.5.5-packed.js"></script>
<div class="carousel">
<ul>
    <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
     <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
       
    </ul>
</div>

CSS

.carousel   {
 width: 300px   
}

JavaScript

$(document).ready(function() {

     

    // Using custom configuration

    $(".carousel ul").carouFredSel({
        circular: true,


        direction           : "left",

        scroll : {

            items           : 1,

            duration        : 1000,                        

            pauseOnHover    : true

        }                  

    });

});