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>

CSS

img {
    width: 100%:
}
#exampleSlider {
    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
    });;



});