JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider" class="slider">
  <div id="slide1" class="slider_item"></div>
  <div id="slide2" class="slider_item"></div>
  <div id="slide3" class="slider_item"></div>
</div>

CSS

.slider {
  width: 450px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slider_item{
  width: 200px;
  height: 200px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
  opacity: 0;
}
.slider_item.active{
  opacity: 1;
}
#slide1 {background: blue;}

#slide2 {background:green;}

#slide3 {background:red;}

JavaScript

function my_slider(opt){ 
 var _  = { 
          pause         : 2000,
          foo           : false,
          pauseFirst    : 2000,
          label         : ".slider_item",
          dir           : "left"
      };
   // Если переданы параметры, то обновим их в шаблоне
  if(typeof opt == "object"){
     for(option in opt){
        _[option] = opt[option];
     }
  }
var parent = this, 
    childs = parent.querySelectorAll(_.label),
    i      = 0, 
    steps  = function(child){
  var  me  = childs[child] ;   
             active   = parent.querySelector(".active") 
            if(active){
               active.classList.remove("active");
            } 
               me.classList.add("active"); 
            if(typeof _.foo == "function"){
              _.foo.call(me);   
              //Если указана функция, выполняем её и передаем текущий слайд
            }
            
              setTimeout(function(){ 
                 //Здесь определяем в какую сторону двигаться
                 if(_.dir == "left"){
                   i = i + 1 >= childs.length?0:i+1;
                 }else{
                   i = i - 1 < 0 ?childs.length - 1 :i - 1;
                 }
                  
                  steps(i);
                  
                  _.pauseFirst = 0;  // после первого показа обнулим
              }, _.pause + _.pauseFirst); 
    }
    if(!parent) return false;  
    steps(i);
} 

my_slider.call(slider,{
 pause      : 3000,  //
 pauseFirst : 1000,   //Дополнительная пауза до начала первого перехода
 foo        : function(){
    console.log(this)
    // какая нибудь функция, при выполнении слайда
 },
 dir        : "right"  // по умолчанию left
})