JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-block">
    <div class="testSlider">
        <div class="slide"><img class="animation" src="http://placehold.it/300x300" alt=""></div>
        <div class="slide"><img class="animation" src="http://placehold.it/300.png/09f/fff" alt=""></div>
        <div class="slide"><img class="animation" src="http://placehold.it/300.png/7ee/fff" alt=""></div>
        <div class="slide"><img class="animation" src="http://placehold.it/300.png/3d5/fff" alt=""></div>
        <div class="slide"><img class="animation" src="http://placehold.it/300.png/105/fff" alt=""></div>
        <div class="slide"><img class="animation" src="http://placehold.it/300.png/2d8/fff" alt=""></div>
    </div>
<a href="#" class="control-left"><</a>
<a href="#" class="control-right">></a>
</div>

CSS

.testSlider {
    position: relative;
    overflow: hidden;
    height: 300px;
}

.testSlider > div.slide, testSlider > div.slide > img {
    position: absolute;
}
.animation {
    -webkit-animation-name: imageAnimation;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0;
     animation-name: imageAnimation;
    animation-duration: 4s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0;
}

	@-webkit-keyframes imageAnimation { 
	    0% {
	        opacity: 1;

	    }

	    100% {
	        opacity: 1;
	        -webkit-transform: scale(1.5) rotate(25deg);
	        transform: scale(1.5) rotate(25deg);
	    }
	}

	@keyframes imageAnimation { 
	    0% {
	        opacity: 1;

	    }

	    100% {
	        opacity: 1;
	        -webkit-transform: scale(1.5) rotate(25deg);
	        transform: scale(1.5) rotate(25deg);
	    }
	}

JavaScript

var slidePath = '.testSlider > div.slide';

var sliderDuration = 53000;

var rotate = setInterval(slideShow, sliderDuration);

$(slidePath).hide();

slideShowFirst();

$('.slider-block').hover(function() {
  clearInterval(rotate);
}, function() {
  rotate = setInterval(function() {
      slideShow();
  }, sliderDuration);
});

$('.control-right').click(slideShow);

$('.control-left').click(function() {

	$(slidePath + ':last-child').fadeOut('slow');

	$(slidePath + ':eq(-2)').fadeIn('slow');	

	$(slidePath + ':last-child').prependTo('.testSlider');

});

function slideShow() {

	$(slidePath + ':last-child').fadeOut('slow');

	$(slidePath + ':first-child').fadeIn('slow').appendTo('.testSlider');
}

function slideShowFirst() {

	$(slidePath + ':first-child').appendTo('.testSlider').show();
}