JSFiddle - React, Tailwind, and code Playground

by backstabe

HTML

<div id="slider-wrap">
    <div id="slider">
        <div class="slide">
            <span>РОДИТЕЛЬСКИЙ КОНТРОЛЬ</span>
            <div>Родительский контроль телеканалов для взрослых</div>
        </div>
        <div class="slide">            
            <span>ОНЛАЙН-КИНОТЕАТРЫ</span>
            <div>Онлайн-кинотеатры: IVI.RU,Tvzavr, Vidimax</div>
        </div>
        <div class="slide">            
            <span>СВЕЖАЯ ТЕЛЕПРОГРАММА</span>
            <div>Всегда свежая и актуальная телепрограмма</div>
        </div>
        <div class="slide">            
            <span>БОЛЕЕ 200 КАНАЛОВ</span>
            <div>Более 200 телеканалов в цифровом качестве</div>
        </div>
    </div>
</div>

CSS

body{
    background:#000;
}
#slider-wrap {
    /* Оболочка слайдера и кнопок */
    width:383px;
}
#slider {
    /* Оболочка слайдера */
    width:383px;
    height:124px;
    overflow: hidden;
    position:relative;
}
#slider .slide {
    /* Слайд */
    width:100%;
    height:100%;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    background:#fff;
    opacity:0.9;
}
.sli-links {
    /* Кнопки смены слайдов */
    margin-top:10px;
    text-align:center;
}
.sli-links .control-slide {
    margin:2px;
    display:inline-block;
    width:16px;
    height:16px;
    overflow:hidden;
    text-indent:-9999px;
    background:url(radioBg.png) center bottom no-repeat;
    background:silver;
}
.sli-links .control-slide:hover {
    cursor:pointer;
    background-position:center center;
}
.sli-links .control-slide.active {
    background-position:center top;
}
#prewbutton, #nextbutton {
    /* Ссылка "Следующий" и "Педыдущий" */
    display:block;
    width:15px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background:url(arrowBg.png) left center no-repeat;
    background:silver;
    opacity:0.8;
    z-index:3;
    outline:none !important;
}
#prewbutton {
    left:10px;
}
#nextbutton {
    right:10px;
    background:url(arrowBg.png) right center no-repeat;
    background:silver;
}
#prewbutton:hover, #nextbutton:hover {
    opacity:1;
}

JavaScript

(function ($) {
var hwSlideSpeed = 1000;
var hwTimeOut = 5000;
var hwNeedLinks = false;

$(document).ready(function (e) {
    $('.slide').css({
        "position": "absolute",
            "top": '0',
        "left": '0'
    }).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $("#slider .slide").size();
    var animSlide = function (arrow) {
        clearTimeout(slideTime);
        $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
        if (arrow == "next") {
            if (slideNum == (slideCount - 1)) {
                slideNum = 0;
            } else {
                slideNum++
            }
        } else if (arrow == "prew") {
            if (slideNum == 0) {
                slideNum = slideCount - 1;
            } else {
                slideNum -= 1
            }
        } else {
            slideNum = arrow;
        }
        $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        $(".control-slide.active").removeClass("active");
        $('.control-slide').eq(slideNum).addClass('active');
    }
    if (hwNeedLinks) {
        var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>')
            .prependTo('#slider');
        $('#nextbutton').click(function () {
            animSlide("next");

        })
        $('#prewbutton').click(function () {
            animSlide("prew");
        })
    }
    var $adderSpan = '';
    $('.slide').each(function (index) {
        $adderSpan += '<span class = "control-slide">' + index + '</span>';
    });
    $('<div class ="sli-links">' + $adderSpan + '</div>').appendTo('#slider-wrap');
    $(".control-slide:first").addClass("active");

    $('.control-slide').click(function () {
        var goToNum = parseFloat($(this).text());
        animSlide(goToNum);
    });
    var pause = false;
    var rotator = function () {
        if (!pause) {
            slideTime = setTimeout(function () {
                animSlide('next')
            }, hwTimeOut);
    ...