Animate Css ile MaksyMex jQuery Slider

css.css

.mexSlider {
	position: relative;
	width: 100%;
	height: 100%;
	margin:auto;
}
.mexSlider ul.mexMain {
	margin: 0;
	padding: 0;
	position: relative; 
}
.mexSlider ul.mexMain li {
	list-style: none;
	position: absolute;
	visibility: hidden;
	display: block;
	opacity: 0;
	transition: all .6s ease-in-out;
}
.mexSlider ul.mexMain li.active {
	visibility: visible;
	opacity: 1;
}
.mexSlider ul.mexMain li img {
	max-width: 100%;
}  

span.arr {
    width: 40px;
    height: 70px;
    background: url(../img/icon/arrBig.png) no-repeat center;
    background-size: cover;
    display: block;
    position: absolute;
    z-index: 9;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

span.arr.prev {
    left: 35px;
    background-position: 0px 0px;
}

span.arr.next {
    right: 35px;
    background-position: -63px 0px;
}  
@media (max-width: 768px){
	.mexSlider ul.sub{display: none;}
}
@media (min-width: 768px){ 
	.mexSlider ul.sub{
		text-align: center;
		position: absolute;
		bottom: 0;
		display: block;
		left: 0;
		right: 0;
		margin: auto;
	}
	.mexSlider ul.sub li {
		list-style: none;
		position: relative; 
		display: inline-block;
		cursor: pointer;
		opacity: 0.5;
		border: 2px solid transparent;
		transition: all .6s ease-in-out;
	}
	.mexSlider ul.sub li.active,
	.mexSlider ul.sub li:hover { 
		opacity: 1;
		border: 2px solid #fff;
	}
}

index.html

<div class="mexSlider" id="mex1" animated="0">  
	<ul class="mexMain"> 
		<li class="active"><img src="img/res1.jpg" class="mexHeigt img-responsive" alt=""/></li>
		<li><img src="img/res2.jpg" class="mexHeigt img-responsive" alt=""/></li> 
		<li><img src="img/res3.jpg" class="mexHeigt img-responsive" alt=""/></li> 
		<li><img src="img/res4.jpg" class="mexHeigt img-responsive" alt=""/></li> 
		<li><img src="img/res5.jpg" class="mexHeigt img-responsive" alt=""/></li> 
	</ul>  
</div> 

js.js

"use strict"; 
(function( $ ){
   $.fn.MaksyMex = function(key, value) { 
		var dataGetMex = this; 
		$(dataGetMex).each(function(){
		var mexID = $(this)[0].id; 
		var mexSliderThis = '#'+mexID+'.mexSlider'; 
		$(mexSliderThis+' ul.mexMain').css('height',$(mexSliderThis+' ul li img').outerHeight());
		if($(mexSliderThis+' ul li > img.mexHeigt')){
			$(window).resize(function(){$(mexSliderThis+' ul.mexMain').css('height',$(mexSliderThis+' ul li img').outerHeight());});
		} 
		
		var main = $(mexSliderThis+' ul.mexMain li');
		var subn  = $(mexSliderThis+' ul.sub li');
		var arrows  = $(mexSliderThis+' span.arr');
		var autoplay  	= key.autoplay;
		var clickMode 	= 1; 
		var clickWait 	= 0;
		var animation   = [' ','shake','tada','swing','pulse','rubberBand','headShake','swing','wobble','jello','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','flipInX','flipInY','lightSpeedIn','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','hinge','rollIn','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','slideInDown','slideInLeft','slideInRight','slideInUp'];
		var animated 	= $(mexSliderThis).attr('animated');
		var InterV 		= 0;
		var maindelay	= 2500;
		var clickdelay	= 10000;
		var min 		= 0;
		var max 		= main.length; 
		main.addClass('animated');
		function clickConfig(){
			if(clickWait == 1 && InterV == 0){
				InterV = 1;
				if(InterV == 1){
					setInterval(function(){
						clickWait = 0;
					},clickdelay);
				}
			}
		}
			if(autoplay == true){
				setInterval(function(){ 
					if(clickWait == 0){
						InterV = 0;
						min++; 
						if(min > max - 1){
							min = 0;
						} 
						main.removeClass().filter(':eq('+min+')').attr('class','active animated '+animation[animated]);
						subn.removeClass().filter(':eq('+min+')').attr('class','active animated '+animation[animated]);
					}
				},maindelay); 
			}else{console.log('All MexSlider stopped');}
			if(clickMode == 1){  
			    subn.click(function(){
					clickWait = 1;
					clickConfig();
					min = $(this).index(); 
					main.removeClass().filter(':eq('+min+')').attr('class','active animated '+animation[animated]);
					subn.removeClass().filter(':eq('+min+')').attr('class','active animated '+animation[animated]);
				}); 
			    arrows.click(function(){
					clickWait = 1;
					clickConfig();
					if ( $(this).attr('mex-direction') == 'prev' ){
						if (min != 0 && min > 0){
							min--;
						}
					}else if ( $(this).attr('mex-direction') == 'next' ){
						if (min >= 0 && min < max - 1){
							min++;
						}
					} 
					console.log(min);
					main.removeClass().filter(':eq('+min+')').attr('class','active animated '+animation[animated]);
					subn.removeClass().filter(':eq('+min+')').attr('class','active animated '+animation[animated]);
				}); 
			 }  
		  });	 
      return this;
   }; 
})( jQuery );