JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div class="slider">
    <ul>
        <li class='li-1'>1</li>
        <li class='li-2'>2</li>
        <li class='li-3'>3</li>
    </ul>
</div>

CSS

.slider {
 z-index: 9;
 width: 700px;
 height: 290px;
 overflow: hidden;
 margin: 0 0 7px;
 position: relative;
 }
 .slider ul,
 .slider li {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }
 .slider ul {
 width: 9999px; 
 }
 .slider ul li {
 list-style: none;
 /*float: left;*/
  position: absolute;
 width: 300px;
 height: 290px;
 /*opacity:0;*/
    display:none;
 }
 .slider .nav {
 position: absolute;
 left: 15px;
 bottom: 12px; 
 }
 .slider .nav span {
 opacity: 0.9;
 background: #fff;
 margin: 0 8px 0 0;
 width: 16px;
 height: 16px;
 border-radius: 8px;
 cursor: pointer;
 overflow: hidden;
 display: block;
 float: left;
 box-shadow: 0 1px 2px #000;
 }
 .slider .nav span.on {
 background: #2e9419;
 }

.li-1 {
    background-color: red;
}
.li-2 {
    background-color: green;
}
.li-3 {
    background-color: blue;
}

JavaScript

$(document).ready(function() {
    $(".slider li:eq(0)").css({'opacity': 1,'display':'block'}).addClass('active');//первый слайд показываеm
 $(".slider").each(function () { // добавляем навигацию
  var obj = $(this);
  $(obj).append("<div class='nav'></div>");
  $(obj).find("li").each(function () {
   $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
   $(this).addClass("slide-"+$(this).index());
  });
  $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
 });
});

count = $(".slider li").length;//количество слайдов

function addActive(el){// удаление активного класса
    setTimeout(function addText() {
  el.addClass('active');
}, 510);
}

function sliderJS (obj, sl) { // slider function
 var bl = $(sl).find("li.slide-"+obj); // находим элемент для показа
   // $(bl).animate({'opacity': 1}, 500);//показываем его
    $(bl).fadeIn(500);//показываем его
    addActive(bl);
    //$(".active").animate({'opacity': 0}, 500).removeClass('active');//убираем текущий
    $(".active").fadeOut(500).removeClass('active');//убираем текущий
    
}

$(document).ready(function() {
    var n=0;
    $(".slider li").each(function () {
     console.log(n); 
    var sl = $(this).closest(".slider");
    var obj = n;
   setTimeout(function addTextf() {
  sliderJS(obj, sl); // слайдим
}, 510);
   // return false;
        n++;
        if(n > count){n=0}
       
   
    });
});

$(document).on("click", ".slider .nav span", function() { // slider click navigate
 var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
 $(sl).find("span").removeClass("on"); // убираем активный элемент
 $(this).addClass("on"); // делаем активным текущий
 var obj = $(this).attr("rel"); // узнаем его номер
    console.log(obj);
 sliderJS(obj, sl); // слайдим
 return false;
});