Simple Jquery Slider with special FX

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

<input type="text" id="effect_num">

CSS

img {width: 100%:}
#exampleSlider {max-height: 250px; overflow: hidden; list-style: none; padding: 0; margin: 0;}

/*** SPECIAL FX ***/
.slideLeft{animation-name:slideLeft;-webkit-animation-name:slideLeft;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes slideLeft{0%{transform:translateX(150%)}50%{transform:translateX(-8%)}65%{transform:translateX(4%)}80%{transform:translateX(-4%)}95%{transform:translateX(2%)}100%{transform:translateX(0%)}}@-webkit-keyframes slideLeft{0%{-webkit-transform:translateX(150%)}50%{-webkit-transform:translateX(-8%)}65%{-webkit-transform:translateX(4%)}80%{-webkit-transform:translateX(-4%)}95%{-webkit-transform:translateX(2%)}100%{-webkit-transform:translateX(0%)}}
.slideRight{animation-name:slideRight;-webkit-animation-name:slideRight;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes slideRight{0%{transform:translateX(-150%)}50%{transform:translateX(8%)}65%{transform:translateX(-4%)}80%{transform:translateX(4%)}95%{transform:translateX(-2%)}100%{transform:translateX(0%)}}@-webkit-keyframes slideRight{0%{-webkit-transform:translateX(-150%)}50%{-webkit-transform:translateX(8%)}65%{-webkit-transform:translateX(-4%)}80%{-webkit-transform:translateX(4%)}95%{-webkit-transform:translateX(-2%)}100%{-webkit-transform:translateX(0%)}}
.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}80%{transform:scale(0.9);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes...

JavaScript

$(function () {

    function random(array) {
         return array[Math.floor(Math.random() * array.length)]
    }

    
    /* SET PARAMETERS */
    var change_img_time 	= 5000;	
    var transition_speed	= 300;

		var randfx						= '';
    var fxArr 						= ['slideLeft', 'slideRight', 'fadeIn', 'bigEntrance', 'pullUp', 'pullDown', 'stretchLeft', 'stretchRight'];
    var specialfx         = 'rand';
    
    var simple_slideshow	= $("#exampleSlider"),
        listItems 				= simple_slideshow.children('li'),
        listLen						= listItems.length,
        i 								= 0,
		
        changeList = function () {
          listItems.eq(i).fadeOut(transition_speed, function () {
              i += 1;
              if (i === listLen) { i = 0; }

              if(specialfx == 'rand') {
                 randfx 		= random(fxArr); 
                 $('#effect_num').val(randfx);
              }		

              listItems.eq(i).fadeIn(transition_speed).attr('class', '').addClass(randfx);
              randfx = '';
          });
        };
		
    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);
	
});