JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="slider">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
</div>

CSS

.slider li{display:none; background:red}
.slider li:nth-child(1){display:block}

JavaScript

$(function(){
      var items = $('.slider a'),
          contador = 0;
      $('.slider').empty();
      $('.slider').append('<li>');
    for(var i = 1; i <= items.length; i++){
        if(i % 4 == 0){
            $('.slider li').eq(contador).append(items[i-1]);
            $('.slider').append('</li>'); 
            contador++;
            $('.slider').append('<li>');
        }else{
            $('.slider li').eq(contador).append(items[i-1]);
        }
        
    }
   mostrar = 1.
   itemsli = $('.slider li')
    setInterval(function(){
      $('.slider li').hide();
       $('.slider li').eq(mostrar).fadeIn(300);
        mostrar = (mostrar + 1) % itemsli.length;
    },3000)
    
})