jQuery Image Slider with Awesome CSS3 Animations - Shifone Slider

Shifone Slider is a touch-friendly jQuery image slider plugin that comes with more than 12 CSS3 animations to create your own style.

Features:

• 12+ CSS3 animation & easing effects like rotate, slide, fade, flip, etc.
• Touch swipe or mouse drag to slide to next/previous one.
• Dots and arrows navigation.
• Auto play with slideshow mode.
• Pause on hover in slideshow mode.
• Has the ability to animate the children elements with random effects.

How to use it:

1. Load the required CSS file in the head section of the web page.

<link href="css/jquery.slider.css" rel="stylesheet" type="text/css">

2. Load the jQuery library and jQuery Shifone Slider plugin at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lib/jquery.slider.min.js"></script>    

3. Create the Html for an image slider.

<div id="demo">

<div class="slider_item"> 
Your slider content goes here
</div>

<div class="slider_item"> 
Your slider content goes here
</div>

<div class="slider_item"> 
Your slider content goes here
</div>

...

</div>

4. Call the plugin with default options.

<script type="text/javascript" charset="utf-8">	
$(document).ready(function() { 
$('#demo').slider();  
});
</script> 

4. Call the plugin with default options.

<script type="text/javascript" charset="utf-8">	
$(document).ready(function() { 
$('#demo').slider();  
});
</script> 

5. Options and defaults.

<script type="text/javascript" charset="utf-8">
$(document).ready(function() { 
$('#demo').slider({
className: '', 
sliderClassName: 'slider_item',
easeType: 'random',
pauseByHover: false,
width: 960,
height: 420, 
delay: 300,
tolerance: 0.25,  
enableDrag: true,
showArrow: true,
showButton: true,
slideShow: false,
slideShowDelay: 3000
});  
});
</script>

---

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