Plugin Usage

1- HEADER

1 2 3
<!-- include ayaSlider plugin right after loading jQuery -->
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/ayaSlider.js" type="text/javascript"></script>

2- HTML

1 2 3 4 5 6 7 8 9 10 11 12
<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- Javascript

1 2 3 4 5 6 7 8 9 10 11 12
<script>
//set default options and initiate ayaSlider
$(document).ready(function(){
$('#slideShow').ayaSlider({
easeIn : 'easeOutBack',
easeOut : 'linear',
delay : 4000,
....,
....
});
});
</script>

Plugin Options

Custom Global Options

  • Description
  • Example
easeIn : custom easing for animating IN sliders (default: linear)
easeOut : custom easing for animating OUT sliders (default: linear)
delay : delay timing of how long the slide should stay in milliseconds (default: 5000)
next : selector/jQuery object of element to be set as "NEXT" controller (When clicked next slide appear)
previous : selector/jQuery object of element to be set as "PREVIOUS" controller (When clicked previous slide appear)
list : 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)
1 2 3 4 5 6 7 8 9 10 11
$(document).ready(function(){
$('#slideShow').ayaSlider({
easeIn : 'easeOutBack',
easeOut : 'linear',
delay : 4000,
timer : $('#header'),
previous : $('.prev'),
next : $('.next'),
list : $('.slideControl')
});
});

Per slide options

  • Description
  • Example

You can add custom animation for any element inside your slides. For sliding in you need to add these options to the data attribute data-in and for sliding out add these options to the data attribute data-out, both attributes can have same options.

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
1 2 3 4 5 6 7 8 9 10 11 12
<!-- 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>
 
...