JSFiddle - React, Tailwind, and code Playground

by Preston Badeer

HTML

<div id="slider">
    <ul id="sliderres">
        <li>
            <img class="slires" src="slider/1.jpg" alt="">
        </li>
        <li>
            <img class="slires" src="slider/2.jpg" alt="">
        </li>
        <li>
            <img class="slires" src="slider/3.jpg" alt="">
        </li>
        <li>
            <img class="slires" src="slider/4.jpg" alt="">
        </li>
    </ul>
</div>

CSS

#slider {
    overflow:hidden;
    margin:10px auto;
    width:1024px;
    position:relative
}
#slider #sliderres li {
    font-size:20px;
    float:left;
    list-style:none;
    text-align:center
}
#slider #sliderres li img {
    width:100%
}

JavaScript

var sliuzun = $('#sliderres li:first-child').height(),
    time = 0;

$('#slider').height(sliuzun);

$('#buton li:first').addClass('buton');

$('#buton li').click(function () {
    var butind = $(this).index();
    $('#slider #sliderres li:eq(' + butind + ')').fadeIn('fast');
    $('#buton li').removeClass('buton');
    $(this).addClass('buton');
    return false;
});

$(window).resize(function () {
    sliuzun = $('#sliderres li:first-child').height()
    $('#slider').height(sliuzun);
});

$.Slider = function (t) {
    $('#slider #sliderres li').hide();
    if (time < t - 1) {
        time++;
        $('#slider #sliderres li:eq(' + time + ')').fadeIn('fast');
    } else {
        $('#slider #sliderres li:first').fadeIn('fast');
        time = 0;
    }
}
setInterval('$.Slider(' + $('#slider #sliderres li').length + ')', 2500);