JSFiddle - React, Tailwind, and code Playground

by DinoMyte

HTML

<ul class="rotating-images">
            <li><img src="img/girl1.jpg"></li>
            <li><img src="img/girl2.jpg"></li>
            <li><img src="img/girl3.jpg"></li>
            <li><img src="img/girl4.jpg"></li>
        </ul>

JavaScript

var fadeDuration=2000;
var displayTime=4000;
var currentIndex=1;
var nextIndex=1;

    $(document).ready(function() {      
   // alert();
        $('ul.rotating-images li').css({opacity: 0.0});
       $("ul.rotating-images li:nth-child("+nextIndex+")").addClass('show').animate({opacity: 1.0},fadeDuration);
       
       /* setInterval("nextSlide()",displayTime);*/
             //  alert();
        setInterval(function(){
      //  alert();
          nextIndex = currentIndex+1;
          if(nextIndex > $('ul.rotating-images li').length)
          {
           nextIndex =1;
          }
          $("ul.rotating-images li:nth-child("+nextIndex+")").addClass('show').animate({opacity: 1.0},fadeDuration);
          $("ul.rotating-images li:nth-child("+currentIndex+")").animate({opacity: 0.0},fadeDuration).removeClass('show');
          currentIndex = nextIndex;
          },displayTime);
    });