JSFiddle - React, Tailwind, and code Playground

by gael

HTML

<div id="carousel-container">
            <ol id="carousel"></ol>
        </div>
        <ol id="carousel-dots-nav"></ol>
        <a id="previous" href="#">Previous</a>
        <a id="next" href="#">Next</a>
        <span id="title"></span>

CSS

body {
    margin: 0;
}

#carousel-container {
    overflow: hidden;
    width: 100%;
}

#carousel {
    margin: 0;
    padding: 0;
    position: relative;
}

.carousel-item {
    display: inline-block;
}

.carousel-dots-nav-item {
    cursor: pointer;
    display: inline-block;
    margin: 10px 20px;
}

JavaScript

$(document).ready(function() {
    //    var carouselItems = [
    //        { src: "images/image01.jpg", title: "Sample 01" },
    //        { src: "images/image02.jpg", title: "Sample 02" },
    //        { src: "images/image03.jpg", title: "Sample 03" },
    //        { src: "images/image04.jpg", title: "Sample 04" },
    //        { src: "images/image05.jpg", title: "Sample 05" }
    //    ];


        var carouselItems = [
            { src: "http://placehold.it/600x300/cccccc/000000", title: "Sample 01" },
            { src: "http://placehold.it/600x300/f45a45/000000", title: "Sample 02" },
            { src: "http://placehold.it/600x300/b78d65/000000", title: "Sample 03" },
            { src: "http://placehold.it/600x300/666aa0/000000", title: "Sample 04" },
            { src: "http://placehold.it/600x300/cccddd/000000", title: "Sample 05" }
        ];

        Carousel = function() {
            // keep track of the current position
            var position = 0;

            // build carousel based on items in the carouselItems array
            $(carouselItems).each(function(index, value){
                var li = $('<li/>');
                li.addClass('carousel-item');
                li.css('width', 100 / carouselItems.length + '%');
                li.appendTo($('#carousel'));

                var img = $('<img/>');
                img.attr('src', value.src);
                img.appendTo(li);

                var liDot = $('<li/>');
                liDot.data("position", index);
                liDot.addClass('carousel-dots-nav-item').html('o');
                liDot.appendTo($('#carousel-dots-nav'));
            });

            // increase width of the carousel
            $('#carousel').css('width', carouselItems.length * 100 + '%');

            // add events to dots
            for (var i = 0; i < $('.carousel-dots-nav-item').length; i++) {
                var dot = $('.carousel-dots-nav-item')[i];

                // show the title of the image...