animated-content-slider

a jQuery plug-in that adds animation to contentsliders/banners/etc

Compatible with all major browsers: ie8+,Chrome,Safari,Firefox,Opera

View it on CodePen

Options

Parameter	Type	Description	Default Value
height	INT	Height of the slider ex: height:300	300
width	INT	Width of the slider ex: width:900	600
slide_interval	INT	Slider Time in milliseconds ex: slide_interval:3000	3000
loader	Boolean	Shows the loader bar if set to true	true
pages	Boolean	Shows the slider pagination if set to true	true
pause	Boolean	enables and displays slide play and pause if set to true	true
controls	Boolean	enables and displays slide previous and next button if set to true	true
slide_animation_data	Array	the heart of your animation goes here(refer to Slide Animation Options below)	none

Slide Animation Options

code structure only(please use this pattern):
slide_animation_data: [[[]],[[]],[[]]]
code structure with definitions
slide_animation_data:
[
//first slide
[
[target element,animation frame,animation type], // animation 1 of your element
[target element,animation frame,animation type] // animation 2 of your element
],
//second slide
[
[target element,animation frame,animation type], // animation 1 of your element
[target element,animation frame,animation type] // animation 2 of your element
],
//third slide
[
[target element,animation frame,animation type], // animation 1 of your element
[target element,animation frame,animation type] // animation 2 of your element
],
]

Element	Type	Description
first element (target element)	String	the target element's tagname, classname,or ID
second element (animation frame)	Float/Double	what part of the "time sequence" will the animation take place, in seconds
third element (animation type)	String	What type of animation to execute, please refer at the last part at the bottom for the list of animations or go to this link http://cdpn.io/nFdAs

Example

my other example

	jQuery('#slider').animatedSlider({
				'loader':true,
				'width':900,
				'height':300,
				'slide_animation_data' : 
					[//slides
						//slide1 BEGIN
						[
							['.txt1',0,'bounceInDown'],
							['.txt2',0.8,'flip'],
						],
						//slide2 BEGIN
						[
							['p',0,'bounceInDown'],
						],
						//slide2 BEGIN
						[
							['h1',0,'fadeIn'],
						]
					]
				
				
			});

On your HTML

you can use any name for your slider container but you have to specify a class of "slide[slide#]" for ever slide

	 <div id="slider">
            <div class="slide1">
            	<h2 class="txt1">Bring Life Back </h2>
            	<h2 class="txt2">to Your Banners </h2>
            </div>
            <div class="slide2">
                <p>asdasd</p>
            </div>
            <div class="slide3">
                <h1>Slide3</h1>
                <p>content 3</p>
            </div>
        </div>

<script> String.prototype.escapeHTML = function () { return( this.replace(/>/g,'>'). replace(/

Dependencies (CDN)

jQuery

"https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

GSAP

"http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"

Animation Types

http://cdpn.io/nFdAs

rotateOutDownLeft
 rotateOutDownRight
 rotateOutUpLeft
 rotateOutUpRight
 rotateInUpRight
 rotateInUpLeft
 rotateInDownRight
 rotateInDownLeft
 flipOutX
 flipOutY
 flipInY
 flipInX
 fadeIn
 fadeInUp
 fadeInLeft
 fadeInRight
 fadeInDown
 fadeOut
 fadeOutUp
 fadeOutLeft
 fadeOutRight
 fadeOutDown
 bounce
 bounceInFront
 bounceIn
 bounceInUp
 bounceInDown
 bounceInLeft
 bounceInRight
 bounceOut
 bounceOutUp
 bounceOutDown
 bounceOutLeft
 bounceOutRight
 rotateIn
 flip
 swing
 wobble
 shake
 flash
 tada
 pulse
 scaleIn
 scaleOut