JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x260" alt="" /></li>
    <li><img src="http://placehold.it/500x270" alt="" /></li>
    <li><img src="http://placehold.it/500x280" alt="" /></li>
</ul>

<ul id="exampleSlider2">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x260" alt="" /></li>
    <li><img src="http://placehold.it/500x270" alt="" /></li>
    <li><img src="http://placehold.it/500x280" alt="" /></li>
</ul>

CSS

img {width: 100%:}
#exampleSlider {max-height: 250px; overflow: hidden; list-style: none; padding: 0; margin: 0;}
#exampleSlider2 {max-height: 250px; overflow: hidden; list-style: none; padding: 0; margin: 0;}

JavaScript

$(function () {
    
    /* SET PARAMETERS */
    var change_img_time 	= 3000;	
    var transition_speed	= 300;
    
    var simple_slideshow	= $("#exampleSlider"),
        listItems 			= simple_slideshow.children('li'),
        listLen				= listItems.length,
        i 					= 0,
        intervalId  // Generated id for the interval timer
		
        changeList = function () {
		
			listItems.eq(i).fadeOut(transition_speed, function () {
				i += 1;
				if (i === listLen) {
					i = 0;
				}
				listItems.eq(i).fadeIn(transition_speed);
			});

        };
		
    listItems.not(':first').hide();
    
    
    $('#exampleSlider').on('mouseenter', function() {
        changeList(); // Do this once immediately
        intervalId = setInterval(changeList, change_img_time);
    }).on('mouseleave', function() {
        clearInterval(intervalId); // Stop slider
    });
    
    
   var simple_slideshow2	= $("#exampleSlider2"),
        listItems2 			= simple_slideshow2.children('li'),
        listLen2				= listItems2.length,
        i2 					= 0,
        intervalId2  // Generated id for the interval timer
		
        changeList2 = function () {
		
			listItems2.eq(i2).fadeOut(transition_speed, function () {
				i2 += 1;
				if (i === listLen2) {
					i = 0;
				}
				listItems2.eq(i2).fadeIn(transition_speed);
			});

        };
		
    listItems2.not(':first').hide();
    
    
    $('#exampleSlider2').on('mouseenter', function() {
        changeList2(); // Do this once immediately
        intervalId2 = setInterval(changeList2, change_img_time);
    }).on('mouseleave', function() {
        clearInterval(intervalId2); // Stop slider
    });
    
    
});