JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<!--SLIDESHOW ONE-->
<div class="bigandsmall">
    <div class="bigPicture">
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/003300" />
        </div>
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/003300" />
        </div>
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/003300" />
        </div>
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/003300" />
        </div>
    </div>
    <div class="smallPicture">
        <img src="http://placehold.it/50x50/003300" />
        <img src="http://placehold.it/50x50/003300" />
        <img src="http://placehold.it/50x50/003300" />
        <img src="http://placehold.it/50x50/003300" />
    </div>
</div>
<!--END OF SLIDESHOW ONE-->
<!--SLIDESHOW TWO-->
<div class="bigandsmall">
    <div class="bigPicture">
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/000000" />
        </div>
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/000000" />
        </div>
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/000000" />
        </div>
        <div class="easyzoom easyzoom--overlay">
            <img src="http://placehold.it/50x50/000000" />
        </div>
    </div>
    <div class="smallPicture">
        <img src="http://placehold.it/50x50/000000" />
        <img src="http://placehold.it/50x50/000000" />
        <img src="http://placehold.it/50x50/000000" />
        <img src="http://placehold.it/50x50/000000" />
    </div>
</div>
<!--END OF SLIDESHOW TWO-->

JavaScript

$.fn.slideThis = function () {
    this.each(function () {
        var THIS = this;
        var $this = $(this);
        
        THIS.$sl = $this.find('.bigPicture > div'),
        THIS.$th = $this.find('.smallPicture > img'),
        THIS.N = THIS.$sl.length,
        THIS.T = 10000;
        THIS.C = 6;
        THIS.$sl.hide().eq(THIS.C).show();
        THIS.$th.eq(THIS.C).addClass('on');
        THIS.P = 1000;
        THIS.F = 1000;

        $this.css({
            border: "5px solid yellow"
        });

        // ANIMATION
        THIS.anim = function () {
            THIS.$sl.eq(THIS.C % THIS.N).stop(1).fadeTo(THIS.F, 1).siblings().fadeTo(THIS.F, 0);
            THIS.$th.removeClass('on').eq(THIS.C % THIS.N).addClass('on');
        }

        // AUTO ANIMATE     
        THIS.autoAnim = function () {
            THIS.T = setTimeout(function () {
                THIS.C++;
                THIS.anim(); // Animate
                THIS.autoAnim(); // Prepare another iteration
            }, THIS.P + THIS.F);
        }
        THIS.autoAnim(); // Start loop

        // HOVER PAUSE
        THIS.$sl.hover(function (e) {
            return e.type === 'mouseenter' ? clearTimeout(THIS.T) : THIS.autoAnim();
        });

        // HOVER THUMBNAILS
        THIS.$th.on('mouseenter', function () {
            THIS.C = THIS.$th.index(this);
            THIS.anim();
        });
    });
};
$(".bigandsmall").slideThis();