JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

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 Carousel = 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" }
        ];
      
        // 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.addClass('carousel-dots-nav-item').html('o');
            liDot.appendTo($('#carousel-dots-nav'));
          
          	var dot = $('.carousel-dots-nav-item')[index];
            $(dot).hover(function(e){
              	console.log();
                $('#title').text(carouselItems[index].title);
            }, function(e){
                $('#title').text('');
            });
          
            // move to the appropriate slide when a dot is clicked
            $(dot).click(function(e){
                position = index;
                $('#carousel').animate({
                    left: -index * 100 + '%'
                }, 500);
            });
          
        });

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


        // add click event to next button
        $("#next").click(function(e){
            e.preventDefault();

            if (position == carouselItems.length - 1) return;

            position++;
           ...