JSFiddle - React, Tailwind, and code Playground

by BradleyIW

HTML

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

      <ul class="slider1">
  <li>
    <img src="https://g4graphic.files.wordpress.com/2008/06/ithaka-20083.jpg"> <!-- random image -->
  </li>
  <li>
    <img src="https://g4graphic.files.wordpress.com/2008/06/ithaka-20086.jpg"> <!-- random image -->
  </li>
  <li>
    <img src="http://farm5.static.flickr.com/4078/4764018199_9a8b4892f8.jpg"> <!-- random image -->
  </li>
  <li>
    <img src="http://farm5.static.flickr.com/4122/4764658220_16f1f4485f.jpg"> <!-- random image -->  </li>
</ul>
      
            <ul class="slider2">
  <li>
    <img src="http://storystream.it/wp-content/uploads/2014/05/getty-big-logo.jpg"> <!-- random image -->
  </li>
  <li>
    <img src="http://laubplusco.net/wp-content/uploads/2014/09/Koala_cropped_1.jpg"> <!-- random image -->
  </li>
  <li>
    <img src="http://coolimages4free.com/wp-content/uploads/2015/03/holy_week1.jpg"> <!-- random image -->
  </li>
  <li>
    <img src="http://img.posterlounge.de/images/wbig/fine-art-images-sonnenaufgang-im-wattenmeer-211036.jpg"> <!-- random image -->  </li>
</ul>

CSS

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

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

.slider1 {
  margin-top:250px;
width:150px; /* Update to your slider width */
  height: 500px; /* Update to your slider height */
  position:absolute;
  overflow: hidden;
}

.slider1 li {
  width:100%;
  display:block;
  position: absolute; 
  top: 0; 
  left: 0; 
}

.slider2 {
  margin-top:250px;
  margin-left:151px;
  width: 350px; /* Update to your slider width */
  height: 150px; /* Update to your slider height */
  position:absolute;
  overflow: hidden;
}

.slider2 li {
  width:100%;
  display:block;
  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 
);

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

function slides1(){
  return $slider1.find($slide1);
}

slides1().fadeOut();

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

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

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

function slides2(){
  return...