IMA-jQuery-Slider (mode = fade)

by etiennenoel

HTML

<div class="IMA-sliderContainer" id="sliderContainer1">
    <ul id="slider1" class="IMA-slider" >
        <li><img src="http://image.shutterstock.com/display_pic_with_logo/77318/109365194/stock-photo-green-apple-with-leaf-isolated-on-a-white-background-109365194.jpg" /></li>
        <li><img src="http://image.shutterstock.com/display_pic_with_logo/599431/127612211/stock-photo-green-apple-isolated-on-white-background-127612211.jpg" /></li>
        <li><img src="http://image.shutterstock.com/display_pic_with_logo/507223/121073518/stock-photo-strawberries-121073518.jpg" /></li>
    </ul>
</div>

<script>

</script>

CSS

.IMA-sliderContainer {
    background-color:black;
    margin:auto;
    overflow:hidden;
	position: relative;
}


.IMA-sliderContainer .IMA-slider {
    height:100%;
    margin:auto;
    padding:0px;
    position:relative;
}

.IMA-sliderContainer .IMA-slider li {
    display:none;
    height: 100%;
    position:absolute;
    top:0px;
    width: 100%;
}



#sliderContainer1 {
    height:325px;
    width:600px;
}


img {
    height:325px;
    width:600px;
}

JavaScript

(function($){



    $.fn.slider = function(options){

        var $element = this;

        var slider = {};

        slider.slides = $element.find('li');

        slider.activeSlideNumber = 0;
        slider.activeSlideElement;

        slider.autoPlayTimeout;

		slider.settings = {
			//GENERAL
			firstSlideIndex : 0,

			autoPlay : {
				activated: true,
				duration : 3000
			},
			
			controls : {
				next : {
					show: true,
					id: "nextSlideControl"
				},
				previous : {
					show: true,
					id: "previousSlideControl"
				}
			},
			

			animation : {
				elementsToAnimate : {
					className: "elementToAnimate"
				},
				type : "fade", // Can be carousel, fade,
                
				//Transitions between slides
				transitions :  {					
					properties : {
						
						duration: 1000, // in milliseconds. if there's more than one, we will choose randomly one duration for each element
						easingType : "none"
					}
				}

			},
			
			sliderContainer : {
				id: 'sliderContainer',
				class: 'IMA-sliderContainer'
			}

		}

        /************
         *
         *
         * UTILITY FUNCTIONS
         *
         */



        /***************
         * @param from
         * @param to
         * @returns {number}
         */

        slider.getRandomNumber = function(from, to) {
            return Math.floor(Math.random()*(to-from+1)+from);
        }

               
        slider.verifyTransition = function(transition) {
            
            if(slider.settings.animation.type == 'carousel') {           
            
                if(transition.properties.duration != undefined || transition.properties.duration != "") {
                    var dir = transition.properties.direction;
                    if( (dir != undefined || dir != "") && (dir == 'left' || dir == 'right' || dir == 'top' || dir == 'bottom') )
                        return transition
                    else {
                        console.log("Error: There is a problem...