Flexible jQuery slider plugin - ayaSlider

ayaSlider is a Flexible jQuery slider plugin that can Embed and Animate Any/Every HTML Element on your page.

Basic Usage:

1. Include jQuery Library and ayaSlider.js

<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/ayaSlider.js" type="text/javascript"></script>

2. Html

<div id="slideShow">
   <!-- FIRST SLIDE -->
   <div data-in="options" data-out="options">
      <div data-in="..." data-out="...">
        Some content to slide
      </div>
   </div>
   <!-- SECOND SLIDE -->
   <div data-in="..." data-out="...">
      ....
   </div>
</div>

3. Call the plugin

<script>
//set default options and initiate ayaSlider
$(document).ready(function(){
    $('#slideShow').ayaSlider({
       easeIn : 'easeOutBack',
       easeOut : 'linear',
       delay : 4000,
       ....,
       ....
    });
});	
</script>

4. Custom Global Options

$(document).ready(function(){
	$('#slideShow').ayaSlider({
	   easeIn : 'easeOutBack', //custom easing for animating IN sliders (default: linear)
	   easeOut : 'linear', // custom easing for animating OUT sliders (default: linear)
	   delay : 4000, // delay timing of how long the slide should stay in milliseconds (default: 5000)
	   timer : $('#header'), // 
	   previous : $('.prev'), //selector/jQuery object of element to be set as "PREVIOUS" controller (When clicked previous slide appear)
	   next : $('.next'), //selector/jQuery object of element to be set as "NEXT" controller (When clicked next slide appear)
	   list : $('.slideControl') // selector/jQuery object of UL element to be set as a controller of the slides flow (Must has the same number of <li> as slides)
	});
});

5. Per slide options

<!-- SLIDE ONE -->
<div data-in="top:-1000;duration:2000;delay:250;ease:easeInOutBounce" data-out="delay:5000;opacity:0">
something to be bounced in and then fade out after 5 seconds
</div>

<!-- SLIDE 2 -->
<div data-out="delay:5000;opacity:0">
<span>Something</span>
<img src="./images/bg.png" data-in="delay:1000;left:-250;opacity:0;duration:1000" />
</div>

top : start animaton at this top point (from up to down animation this value must be negative)
left : start animation at this left point (from left to right this value must be negative)
opacity : start animation at this opacity point (0 - .9)
duration : how long animation should last (in milliseconds)
delay : time should pass before animation starts (in milliseconds)
ease : default easing for this element

Change logs:

2015-06-02

• fix multi slides on same page with different list controls

v1.2.4 (2014-04-07)

• allow multiple slides on same page

---

This awesome jQuery plugin is developed by mamod. For more Advanced Usages, please check the demo page or visit the official website.