JSFiddle - React, Tailwind, and code Playground

by Derek Klingman

HTML

<span></span>
<hr/>
<div class="slider">
   <div class="container">
     <div class="slides">
        <div class="slide active">test1</div>
        <div class="slide">test2</div>
        <div class="slide">test3</div>
        <div class="slide">test4</div>
        <div class="slide">test5</div>
     </div>
   </div>
</div>

CSS

.slide{
    opacity :0;
}
.active{
    opacity :1;
}

.slides{
    background-color:yellow;
    height:20px;
    overflow-y:hidden;
}

JavaScript

if($('.slider').length) {
    // Element exists

    var height = $('.slide .col-md-8').outerHeight(),
        slides = $('.slides'),
        wait = 2000;

    var slideInterval = setInterval(startSlideInterval, wait);
    
    $(slides).find('.slide').on({
        mouseover: function(){
            clearInterval(slideInterval);
        },
        mouseout: function(){
            slideInterval = setInterval(startSlideInterval, wait);
        }
    });
    
    function startSlideInterval() {
        var active = $(slides).find('div.active');
            nextSlide = $(active).next('.slide');
            lastSlide = $(slides).find('div.slide:last');
        
        $(active).removeClass('active');
        $(lastSlide).after($(active));
        $(nextSlide).addClass('active');
    }
 }