JSFiddle - React, Tailwind, and code Playground

by emn178

HTML

<div class="ss">
                        <div id="slideshow">
                            <div>
                                <img src="img/ss.jpg">
                            </div>
                            <div>
                                <img src="img/ss2.jpg">
                            </div>
                            <div>
                                <img src="img/ss3.jpg">
                            </div>
                            <div>
                                <p>text</p>
                            </div>
                         </div>
                    </div>

JavaScript

var timer;
function start() {
    timer = setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  2000);
}
function stop() {
    $('#slideshow > div:first').stop();
    clearInterval(timer);
}
$("#slideshow > div:gt(0)").hide();
$("#slideshow").mouseover(stop).mouseout(start);
start();