JSFiddle - React, Tailwind, and code Playground

by AliReza Moazami

HTML

<time></time>

<div>اسلاید اول</div>
<div>اسلاید دوم</div>
<div>اسلاید سوم</div>

CSS

div{
    border:1px solid navy;
    display:inline-block;
    width:100%;
    height:55px;
    background-color:#efe;
}
.disn{display:none}

JavaScript

var c=0;
function showSec(){
    c++;
    $("time").html(c);
}
setInterval(showSec, 999);
/////////////////////////////////////////
var activeSlide = 0;
$("div").addClass("disn");
function showNextSlide(){
    activeSlide++;
    if(activeSlide>2)
        activeSlide=0;
    $("div").addClass("disn").eq(activeSlide).removeClass("disn");
}
var t = setInterval(showNextSlide, 1E4);
$("div").hover(function(){
    clearInterval(t);
}, function(){
    t = setInterval(showNextSlide, 1E4);
});