JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide">
    <img src="http://www.innovativewebarchitects.com/images/menu-img-2.png"/>
<img src="http://www.innovativewebarchitects.com/images/menu-img-1.png"/>
<img src="http://www.innovativewebarchitects.com/images/menu-img-3.png"/>
</div>

CSS

#slide img{
    display:none;
}

JavaScript

(function($){		
			
			$.imageSlider = function(selector, settings){
					//settings
						var config = {
								'delay':2000,
								'speed':500
							};
							
							if(settings){
									$.extend(config, settings);
								}
				
					//vars
					var obj = $(selector);
					
					obj.children('img').css('transition','width 2s, height 2s, transform 2s');			
					var image = obj.children('img');
					var count = image.length;
					
					var i = 0;
					
					image.eq(0).show(); //first image showing
					
					//begin the image loop
					
					setInterval( function() {
								image.eq(i).fadeOut(config.speed);
					            i = (i+1 == count) ? 0 : i+1;
								image.eq(i).fadeIn(config.speed);
								image.eq(i).css("transform","rotate(45deg)");
                          }, config.delay
					);
					
				
				return this;
				}

})(jQuery);

   $(function() {
      $.imageSlider('#slide');
    });