JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <img src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg">
  <img src="http://openwalls.com/image/399/explosion_of_colors_1920x1200.jpg">
  <img src="http://www.redorbit.com/media/gallery/universe/iod-universe-121112.jpg">
  <img src="http://www.desktopwallpaperhd.net/wallpapers/14/b/beaches-summer-beautiful-beach-wallpaper-sunset-images-142299.jpg">
</div>

CSS

img {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: block;
  -webkit-transition: opacity 0.25s;
  -webkit-backface-visibility: hidden;
}

img.active {
    opacity: 1;
}

JavaScript

// Instantly invoked function
(function($){
    
    // Set up our plugin
    $.fn.carousel = function(){
      
      // Hold reference to collection
      var collection = this;
        
      // Find all the images in our container
      var images = this.find('img');
      
      // Find the active image in countainer
      var active = this.find('.active');
      
      // Want to make sure that active is set
      if(active.length <= 0){
          active = images.first();
          active.addClass('active');
      }
        
      // Set a delay
      setTimeout(function(){
         // Find the next image
         active.next()
              // Add the class active to next image
             .addClass('active')
              // End, get previous collection (original active image)
             .end()
              // Remove class on original active image
             .removeClass('active');
          
         // Call carousel again, to iterate through
         collection.carousel();
          
      }, 2000);
        
      // Return the collection to maintain chainability
      return this;  
    };
    
})(jQuery);
    
$('.container').carousel();