JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<ul class="slider">
  <li>1
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>2
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>3
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>4
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>

CSS

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}

JavaScript

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();
    
      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);
    
      if (slides().length == $i + 1) $i = -1; // loop to start
    
      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);