JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div id="container">
	<div id="slider">
		<img src="http://placekitten.com/200/200">
		<img src="http://placekitten.com/200/201">
		<img src="http://placekitten.com/200/203">
		<img src="http://placekitten.com/200/204">
		<img src="http://placekitten.com/200/205">
		<img src="http://placekitten.com/200/206">
	</div>
	<a id="prev" href="#">prev</a>
	<a id="next" href="#">next</a>
</div>

CSS

#container {position:relative; width:200px; height:200px;}
#slider img {position:absolute; display:none;}
#prev, #next {position:absolute; bottom:10px; padding:0 5px; color:#000;}
#prev {left:10px;}
#next {right:10px;}

JavaScript

$(document).ready(function() {
    $("#slider img").rotate();
});

(function($) {
	$.fn.rotate = function() {
		var img = $("#slider img");
		var slides = img.length;
		var active = 0;
        var self = $(this);
        var delay = 1000;
        var firstRun = true;
		//img.first().show();
    
        this.hover(function(){
            img.clearQueue();
 			img.stop();
        }, 
            function(){
                 rotate();                           
            })
        
		$("#prev").click(function() {
			active = (active - 1) % slides;
			img.clearQueue();
 			img.stop();
			rotate();
		});

		$("#next").click(function() {
			active = (active + 1) % slides;
			img.clearQueue();
 			img.stop();
			rotate();
		});

		function rotate() {
           
            var current = $(img[active]);
			active = (active + 1) % slides;

			if (active == slides) {
				active = 0;
			}
	
			if (active < 0) {
				active = slides - 1;
			}

            setTimeout(function(){
                img.not(active).fadeOut(1000);
                img.eq(active).stop(true).fadeTo(1000, 1, rotate);
                console.log("slides:", slides, " | active: ", active);
                
                firstRun = false;
            }, (firstRun ? 0 : delay) );
			
			//event.preventDefault();
		}
		 rotate()

    };
})(jQuery);