JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mySlides" data-duration="500">111</div>
<div class="mySlides" data-duration="">222</div>
<div class="mySlides" data-duration="4000">333</div>
<div class="mySlides" data-duration="">444</div>

JavaScript

var slider = {
      slideIndex: null,
      prevSlideIndex: null,
      slides: null,
      defaultDuration: 2000,

      initSlides: function(){
        this.slides = document.getElementsByClassName("mySlides");
        for( var i = 0; i < this.slides.length; i++ ){
          this.slides[i].style.display = "none"; 
        }
        this.prevSlideIndex = null;
        this.slideIndex = -1;
      },

      showSlides: function(){
        if( this.prevSlideIndex != null )  this.slides[ this.prevSlideIndex ].style.display = "none";
        this.slideIndex = ( this.slideIndex + 1 + this.slides.length ) % this.slides.length;
        this.slides[ this.slideIndex ].style.display = "block";
        this.prevSlideIndex = this.slideIndex;
        var duration = +( this.slides[ this.slideIndex ].getAttribute('data-duration') || this.defaultDuration );
        setTimeout( this.showSlides.bind( this ), duration ); // Change image every 2 seconds
      }
    };

    slider.initSlides();
    slider.showSlides();