JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div class="carousel" id="c1">
    <ul class="carousel__items">
        <li class="carousel__item">
            <img src="https://placeimg.com/640/480/animals">
        </li>
        <li class="carousel__item">
            <img src="https://placeimg.com/640/480/people">
        </li>
        <li class="carousel__item">
            <img src="https://placeimg.com/640/480/nature">
        </li>
    </ul>

    <ul class="carousel__dots">
        <li class="carousel__dot-link"></li>
        <li class="carousel__dot-link"></li>
        <li class="carousel__dot-link"></li>
    </ul>
</div>

CSS

.carousel {
    margin-bottom: 40px;
    overflow: hidden;
    position: relative;
}

.carousel__items {
    height: 100%;
    width: 100%;
}

.carousel__item {
    height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
}

.carousel__item.active {
    height: auto;
    min-height: 400px;
    opacity: 1;
}

.carousel__dots {
    bottom: 20px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.carousel__dot-link {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-right: 12px;
    position: relative;
}

.carousel__dot-link.active {
    background-color: blue;
}

.carousel__dot-link::after {
    width: 18px;
    height: 18px;
    border: 2px solid blue;
    border-radius: 18px;
    content: '';
    display: block;
    left: -6px;
    position: absolute;
    top: -6px;
}

img {
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 0;
}

JavaScript

$(".carousel").each(function(x){

	var carouselId = $(this).attr('id');
	var Carousel = (function($) {
        'use strict';
        //var wrap = $('.carousel');
        var wrap = $('#' + carouselId);
        var activeItemIndex = 0;
        var s;

        return {
            settings: {
                delay: 10000,
                items: wrap.find('.carousel__item'),
                totalItems: 0,
                dots: wrap.find('.carousel__dots'),
                dotLinks: wrap.find('.carousel__dot-link'),
                timeout: 0,
            },

            init: function(args) {
                if (wrap && wrap.length) {
                    s = $.extend({}, this.settings, args);
                    s.totalItems = s.items.length;

                    if (s.totalItems > 1) {
                        this.setupDotsData();
                        this.activate();
                        this.eventListeners();
                        wrap.addClass('active');
                    }
                }
            },

            eventListeners: function() {
                s.dotLinks.on('click', function() {
                    var index = $(this).data('index');
                    Carousel.stop();
                    Carousel.show(index);
                });
            },

            setupDotsData: function() {
                s.dots.each(function() {
                    $(this).find('li').each(function(index) {
                        $(this).data('index', index);
                    });
                });
            },

            activate: function() {
                if (s.totalItems > 1) {
                    Carousel.show(0);
                } else {
                    s.items.eq(0).addClass('active');
                }
            },

            show: function(index) {
                s.items.removeClass('active');
                s.dotLinks.removeClass('active');
                s.items.eq(index).addClass('active');
               ...