JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<div id="slider">
    <div class="slide"><img style="background: #ff0000;" /></div>
    <div class="slide"><img style="background: #00ff00;" /></div>
    <div class="slide"><img style="background: #0000ff;" /></div>
</div>
<div id="controls"></div>

CSS

#controls button {
    border:none;
    background:none;
    opacity:0.5;
    font-size:25px;
    font-weight:900;
    margin:0 5px 0 0;
    padding:0 3px;
    cursor:pointer;
    outline:none;
}

#controls, #slider {
    margin:0 auto;
    text-align:center;    
}

#slider {
    overflow:hidden;
    position:relative;
    width:200px;
    height:200px;
}
#slider .slide {
    position:absolute;
    top:0;
    left:0;
}
.slide img {
    width:200px;
    height:200px;    
}

JavaScript

//Automatic slide rotation
var count = 0;
var timer = 0;
var currentslide = 0;
function changeslide() {
    timer++;
    if (timer >= 5) {
        timer = 0;
        currentslide++;
        if (currentslide >= count) {
            currentslide = 0;
        }
        $("#controls button").css("opacity", 0.5);
        $("#controls button").eq(currentslide).css("opacity", 1);
        $("#slider").children().not(":eq(" + currentslide + ")").fadeOut();
        $("#slider").children().eq(currentslide).fadeIn();
    }
}

$(function() {
    //Set-up button controls
    count = $("#slider").children().length;
    var output = "";
    for (var i = 0; i < count; i++) {
        output += '<button data-id="' + i + '">&bull;</button>';
        $("#slider").children().eq(i).attr("data-id", i);
    }
    $("#controls").html(output);

    //Slider init
    $("#slider").children().not(":eq(0)").hide();
    $("#controls button").eq(0).css("opacity", 1);

    //Button clicks/animations
    $("#controls button").click(function() {
        var id = $(this).attr("data-id");
        $("#controls button").css("opacity", 0.5);
        $(this).css("opacity", 1);
        $("#slider").children().not(":eq(" + id + ")").fadeOut();
        $("#slider").children().eq(id).fadeIn();
        timer = 0;
        currentslide = id;
    });
    
    setInterval(changeslide, 1000);
});