JSFiddle - React, Tailwind, and code Playground

JavaScript

// Функция смены баннеров
function changeBanner(button) {
    var $banner = $('.banner img'),
        background = $banner.attr('src'),
        src = button.data('src'),
        id = button.data('id');
    $('.scrollbar img').attr('src', '/images/circle_inactive.png');
    button.find('img').attr('src', '/images/circle_active.png');
    $('.banner').css('background', 'url(' + background + ')');
    $banner.fadeOut(100, function() {
        $(this).attr('src', src).data('id', id).fadeIn(800);
    });
}

// Смена баннеров по таймеру
function slider() {
    var currentButton = $('.scrollbar img[src="/images/circle_active.png"]').closest('span'),
        nextButton = (currentButton.next().length > 0) ? currentButton.next() : $('.scrollbar span:first-child');
    changeBanner(nextButton)
}
var	changeBanners = window.setInterval(slider, 5000);

// Смена баннеров при клике на кнопку
$('.scrollbar').on('click', 'span', function() {
    clearInterval(changeBanners);
    if ($(this).data('src') != $('.banner img').attr('src')) {
        changeBanner($(this));
    } else {
        return false;
    }
    changeBanners = window.setInterval(slider, 5000);
});