JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<!-- start of slider -->
<article class="slider">
    <img id="1" src="http://imagine.wsu.edu/past/2011/images/winners/Behavior-1_3677.jpg" alt="custom backsplach; countertop" />
    <img id="2" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTIAT0XJbwtrOdSS7hpQT4h3IeEXfdm9IwohLzushkVDKYYkoNs" alt="kitchen, green Granite counter top" />
</article>
<!-- end of slider -->

CSS

.slider {
    margin: 10px 0;
    max-width: 262px;
    /* Update to your slider width */
    width: 99.86%;
    height: 167px;
    /* Update to your slider height */
    position: relative;
    overflow: hidden;
}
.slider img {
    display: none;
    width: 100%;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

JavaScript

jQuery(function ($) {

    // settings
    var $slider = $('.slider'); // class or id of carousel slider
    var $slide = 'img'; // could also use 'img' if you're not using a ul
    var $transition_time = 900; // 1 second
    var $time_between_slides = 400; // 4 seconds
    var $interval;

    function slides() {
        return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    function startloop(){
    $interval = setInterval(

    function () {
        var $i = $slider.find($slide + '.active').index();

        slides().eq($i).removeClass('active');
        slides().eq($i).fadeOut($transition_time);

        if (slides().length == $i + 1) $i = -1; // loop to start

        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
    }, $transition_time + $time_between_slides);
}
    function pauseLoop() {
        window.clearInterval($interval);
    }

    $(".slider").hover(

    function () {
        //alert("pause");
        pauseLoop(); // pause the loop
    },

    function () {
        //alert("unpause");
          startloop(); //scroll()
    });
    return startloop();
});