JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="https://3.s3.envato.com/files/43917021/scripts/jquery.carousel-1.1.min.js"></script>
<link rel="stylesheet" href="https://3.s3.envato.com/files/43917021/carousel.css">
<div class="carousel"> <!-- BEGIN CONTAINER -->
    
    <div class="slides"> <!-- BEGIN CAROUSEL -->
    
        <div> <!-- SLIDE ITEM -->
            <a href="#">
                <img src="https://3.s3.envato.com/files/43917021/images/slide-1.jpg">
            </a>            
        </div>
        
        <div>
            <a href="#">
                <img src="https://3.s3.envato.com/files/43917021/images/slide-2.jpg">
            </a>
        </div>
        
        <div>
            <a href="#">
                <img src="https://3.s3.envato.com/files/43917021/images/slide-3.jpg">
            </a>
        </div>
        
        <div>
            <a href="#">
                <img src="https://3.s3.envato.com/files/43917021/images/slide-4.jpg">
            </a>
        </div>
        
        <div>
            <a href="#">
                <img src="https://3.s3.envato.com/files/43917021/images/slide-5.jpg">
            </a>
        </div>
        
        <div>
            <a href="#">
                <img src="https://3.s3.envato.com/files/43917021/images/slide-6.jpg">
            </a>
        </div>
        
        <div>            
                <img src="https://3.s3.envato.com/files/43917021/images/slide-7.jpg">
        </div>
                        
    </div> <!-- END SLIDES -->
       
</div>

JavaScript

$(document).ready(function(){
    $('.carousel').carousel({
        carouselWidth:930,
        carouselHeight:330,
        directionNav:true,
        shadow:true,
        buttonNav:'bullets'
    });
});