JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="carousel-container">
    <div id="carousel-inner">
        <ul id="carousel-ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>                  
        </ul>
    </div>
</div>

CSS

#carousel-container {
    width: 680px;
    margin: 2em auto;
    position: relative;
    border: 1px solid #ccc;
    overflow: hidden;
    height: 250px;
}

#carousel-inner {
    width: 680px;
    float: left;
    position: relative;
    overflow: hidden;
}

#carousel-ul {
    position:relative;
    left:-160px;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width:9999px;
    padding-bottom:50px;
}

#carousel-ul li{
    float: left;                                    
    width: 150px;  
    padding:0px;
    height:186px;
    margin: 50px 15px 0 15px;
    position: relative;
    background: #c0c0c0;
    line-height: 186px;
    font-size: 2em;
    text-align: center;
}

JavaScript

var Carousel = new
function() {

    var wrapper = document.getElementById('carousel-container'),
        timer = null;

    var start = function() {

        doCarousel();
    };



    var sliding = function() {


       
        var item_width = $('#carousel-ul li').outerWidth() + 10;

        
        var left_indent = parseInt($('#carousel-ul').css('left')) - item_width;

        
        $('#carousel-ul:not(:animated)').animate({
            'left': left_indent
        }, 2000, 'linear', function() {

            
            $('#carousel-ul li:last').after($('#carousel-ul li:first'));

            
            $('#carousel-ul').css({
                'left': '-160px'
            });
        });




    };

    var doCarousel = function() {

        timer = setInterval(sliding, 2000);


    };

    var pause = function() {

        clearInterval(timer);
        timer = null;


    };

    var resume = function() {

        doCarousel();


    };

    this.init = function() {

        start();


    };


}();

$(function() {

    Carousel.init();

});