JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="slider">
    <div class="slider-content">
        <div id="t1" class="slide color_1 active">1</div>
        <div id="t2" class="slide color_2">2</div>
        <div id="t3" class="slide color_3">3</div>
        <div id="t4" class="slide color_4">4</div>
    </div>
    <div class="slider-thumbs">
        <div class="thumb color_1 active" data-id="t1">1</div>
        <div class="thumb color_2" data-id="t2">2</div>
        <div class="thumb color_3" data-id="t3">3</div>
        <div class="thumb color_4" data-id="t4">4</div>
    </div>
</div>

CSS

.slider {
    position: relative;
    width: 600px;
    height: 345px;
    background: #eee;
}

.slider-content {
    position: absolute;
    top: 5px; left: 5px;
    width: 470px; height: 335px;
    background: #ccc;
}

.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #999;
    z-index: 1;
}
.slide.active {
    z-index: 100;
}

.slider-thumbs {
    position: absolute;
    top: 0; right: 0;
    width: 120px; height: 345px;
    background: #ccc;
}

.thumb {
    width: 110px; height: 80px;
    background: #000;
    margin: 5px;
}
.thumb.active {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}

.color_1 {
    background: green;
}

.color_2 {
    background: red;
}

.color_3 {
    background: blue;
}

.color_4 {
    background: #fff;
}

JavaScript

var $slider = $(".slider"),
    $thumbs = $slider.find(".thumb"),
    $slides = $slider.find(".slide"),
    TIMER = 3000;

var change = function ($thumb, $slide) {
    $thumb.addClass("active").siblings().removeClass("active");
    $slide.addClass("active").siblings().removeClass("active");
};

$thumbs.on("mouseenter", function () {
    var id = $(this).data("id");
    change($(this), $("#" + id));
});

var inter = setInterval(function () {
    var $current,
        $next,
        $slide;
    
    $thumbs.each(function () {
        if ($(this).hasClass("active")) {
            $current = $(this);
            return false;
        };
    });
    
    $next = $current.next();
    if (!$next.length) {
        $next = $thumbs.eq(0);
    }
    
    $slide = $("#" + $next.data("id"));
    
    change($next, $slide);
}, TIMER);