JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div id="tim">0</div>
<div id="tims1">0</div>
<div id="a">
    <img src="http://upatov.com/content/img/portf/googleblogrussia.jpg" alt="Превью работы" />
    <img src="http://upatov.com/content/img/portf/alliancepc.jpg" alt="Превью работы" />
    <img src="http://upatov.com/content/img/portf/silenceorder.jpg" alt="Превью работы" />
    <img src="http://upatov.com/content/img/portf/spart.kh.jpg" alt="Превью работы" />
</div>
<div id="slider_link"></div>

CSS

#a img {
    height:150px;
    display:none;
}
#slider_link p {
    padding:15px;
    background:#eee;
}

JavaScript

$(function () {
    var sets = 600; //Интервал// 1000 - 1 секунда
    $('#a img').first().addClass('active').css('display', 'block');
    //$('#a').append('<img />');
    $('#a img').each(function (index) {
        this.id = 'slide' + (index + 1);
        $(this).addClass('haslink' + (index + 1));
        // Рисуем ссылки
        $('#slider_link').append('<p class="haslink' + (index + 1) + '">' + (index + 1) + '</p>');
    });
    var i = 0;
    setInterval(function () {
        i++;
        $("div#tim").text(i);
        if (i == 10) {
            if ($('#a img').hasClass('active')) {
                if ($('#a img').last().attr('id') == $('.active').attr('id')) {
                    $('#a img.active').fadeOut(500, function () {
                        $('#a img').last().removeClass('active');
                        $('#a img').first().fadeIn(400).addClass('active');
                    });
                } else {
                    $('#a img.active').fadeOut(500, function () {
                        $('#a img.active').next().fadeIn(400).addClass('active');
                        $('#a img.active').prev().removeClass('active');
                    });
                }
            } else {
                $('#a img').first().fadeIn(400).addClass('active');
            }
            i = 0;
        }
    }, sets);
    $('body').on("click", "#slider_link p", function () {
        $('#a img').fadeOut(500, function () {
            $(this).removeClass('active');
        });
        $('#a img.' + $(this).attr('class')).delay(500).fadeIn(500).addClass('active');
        $('#tims1').text($(this).attr('class'));
        i = 0;
    });
});