JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
Animate Slider is a jQuery Slider plugin with specific animations effects for each element.
The Animate Slider plugin uses some predefined animation classes (fadeIn, fadeOut, rotateIn, bounce, slideInRight etc.)
Source: github.com
1. INCLUDE CSS AND JS FILES
<!-- plugin's css styles --> <link rel="stylesheet" href="css/jquery.animateSlider.css"> <script src="js/jquery.js"></script> <script src="js/modernizr.js"></script> <!-- Load the plugin --> <script src="js/jquery.animateSlider.js"></script>
2. HTML
<ul class="anim-slider">
<li class="anim-slide">
<!-- your content here -->
</li>
<li class="anim-slide">
<!-- your content here -->
</li>
<!-- arrows -->
<nav class="anim-arrows">
<span class="anim-arrows-prev">
<i class="fa fa-angle-left fa-3x"></i>
</span>
<span class="anim-arrows-next">
<i class="fa fa-angle-right fa-3x"></i>
</span>
</nav>
<!-- dynamically created dots -->
</ul>
3. JAVASCRIPT
$(function()
{
$(".anim-slider").animateSlider();
});
4. OPTIONS
Here's a list of available settings.
$(".anim-slider").animateSlider(
{
autoplay : true, //starts the autoplay
interval : 5000, //time between slides if autoplay is true
animations : //specify the animations for each element of the slide
{
0 : //Slide No1
{
tagName : //tagName or id or class name of the element
{
show : "fadeIn", //class to add when the element appears
hide : "fadeOut", //class to add when the element disappears
delayShow : "delay1s" //class to add to delay show effect
},
"#id" :
{
show : "bounceIn",
hide : "bounceOut",
delayShow : "delay1-5s"
},
".class":
{
show : "rotateIn",
hide : "rotateOut",
delayShow : "delay2s"
}
},
1 : //Slide No2
{
"#id" :
{
show : "bounceInDown",
hide : "bounceOutUp",
delayShow : "delay0-5s"
},
tagName :
{
show : "slideInLeft",
hide : "slideOutRight",
delayShow : "delay1s"
},
}
}
}
);
