JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<ul id="carousel">
    <li>
        <div>
            First
        </div>
    </li>
    <li>
        <div>
            Second
        </div>
    </li>
    <li>
        <div>
            Third
        </div>
    </li>
</ul>

CSS

#carousel {
    width: 500px;
    height: 300px;
    margin: 2em auto;
    border: 0.5em double #bbb;
    overflow: hidden;
}

#carousel li {
    float: left;
    width: 500px;
    height: 300px;
    display: none;
}

#carousel li div {
    width: 500px;
    height: 300px;
    line-height: 300px;
    background: #eee;
    text-align: center;
    font-size: 2em;
}

#carousel li.carousel-item-visible {display: block;}

JavaScript

var Carousel = {

    run: function() {

        var carousel = $('#carousel');
        carousel.find('li').first().addClass('carousel-item-visible');
        window.setInterval(function() {

            var current = carousel.find('li.carousel-item-visible'),
                next = (carousel.find('li.carousel-item-visible').next().length > 0) ? carousel.find('li.carousel-item-visible').next() : carousel.find('li').first();

            next.fadeIn('slow').addClass('carousel-item-visible').queue(function() {
                current.fadeOut('slow').removeClass('carousel-item-visible');
                next.dequeue();
            });

        }, 3000);


    }

};

Carousel.run();