JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="slide">
    <div class="item" style="background-image: url('http://centra-irk.i-dl.ru/img/bg1.jpg');"></div>
    <div class="item" style="background-image: url('http://centra-irk.i-dl.ru/img/bg1.jpg');"></div>
    <div class="item" style="background-image: url('http://centra-irk.i-dl.ru/img/bg1.jpg');"></div>
    <div class="item" style="background-image: url('http://centra-irk.i-dl.ru/img/bg1.jpg');"></div>
    <div class="item" style="background-image: url('http://centra-irk.i-dl.ru/img/bg1.jpg');"></div>
</div>
<p class="text"></p>

CSS

.disabled {
    display: none;
}

.slide {
    width: 100%;
    height: 300px;
    overflow: hidden;
    white-space: nowrap;
}

.item {
    float: left;
    width: 100%;
    height: 300px;
    background: no-repeat center center;
}

JavaScript

var imgcount = 4; // сколько всего элементов http://malsup.com/jquery/cycle/begin.html
var i = imgcount;
window.setInterval(function () {
    $('.text').text(i);
    $('.slide .item').eq(i).hide("slide", { direction: "right" }, 900)
    $('.slide .item').eq((--i == -1) ? i = imgcount : i).show("slide", { direction: "left" }, 1000);
}, 3000);