Responsive & Touch-Enabled jQuery Slider Plugin - FerroSlider 2

FerroSlider 2 is a simple, customizable and flexible jQuery plugin for creating responsive and touch-enabled sliders with lots of custom options and transition effects.

Features:

• Powered by HTML5 and CSS3. 
• Responsive design for any devices.
• Supports swipe, drag, and keyboard navigation.
• Auto loop.
• Beautiful transition effects wit jQuery Transit plugin.
• Has the ability to slide any html elements, not only images.
• Compatible with all the major browsers and with the two main mobile environments, Android and iOS.
• Lots of options to create your own sliders.
• Events and Ajax loading supported.

Basic Usage:

1. Include the latest version of jQuery javascript library on your web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Include jQuery Transit plugin for transition effects.

<script src="jquery.transit.js" type="text/javascript"></script>

3. Include jQuery FerroSlider 2 plugin script and stylesheet on the web page.

<link rel="stylesheet" href="jquery.ferro.ferroSlider.css" />
<script src="jquery.ferro.ferroSlider-2.2.min.js" type="text/javascript"></script>

4. Create the Html for an image slider with autoplay and slide controllers.

<div id="container"></div>
<div id="div1" class="demo slide" title="Rabbit" data-bgimage="1.jpg"></div>
<div id="div2" class="demo slide" title="Sleeping leopard" data-bgimage="2.jpg"></div>
<div id="div3" class="demo slide" title="Marmot" data-bgimage="3.jpg"></div>
<div id="div4" class="demo slide" title="Horses" data-bgimage="4.jpg"></div>
<div id="div5" class="demo slide" title="Little cat" data-bgimage="5.jpg"></div>
<div id="div6" class="demo slide" title="Elephants" data-bgimage="6.jpg"></div>
<div id="div7" class="demo slide" title="Doggy" data-bgimage="7.jpg"></div>
<div id="div8" class="demo slide" title="Sheeps" data-bgimage="8.jpg"></div>
<div id="div9" class="demo slide" title="Little cat 2" data-bgimage="9.jpg"></div>
...

5. Create the Html for an image slider with autoplay and slide controllers.

<div id="container"></div>
<div id="div1" class="demo slide" title="Rabbit" data-bgimage="1.jpg"></div>
<div id="div2" class="demo slide" title="Sleeping leopard" data-bgimage="2.jpg"></div>
<div id="div3" class="demo slide" title="Marmot" data-bgimage="3.jpg"></div>
<div id="div4" class="demo slide" title="Horses" data-bgimage="4.jpg"></div>
<div id="div5" class="demo slide" title="Little cat" data-bgimage="5.jpg"></div>
<div id="div6" class="demo slide" title="Elephants" data-bgimage="6.jpg"></div>
<div id="div7" class="demo slide" title="Doggy" data-bgimage="7.jpg"></div>
<div id="div8" class="demo slide" title="Sheeps" data-bgimage="8.jpg"></div>
<div id="div9" class="demo slide" title="Little cat 2" data-bgimage="9.jpg"></div>
...

6. Call the plugin with options.

<script type="text/javascript">

$(document).ready(function() {
$(".demo").ferroSlider({
autoSlide: true,
container: "#container2",
createMap: true,
createPlayer: true,
createTimeBar: true,
easing: 'snap',
mapPosition: "bottom_right",
playerPosition: "bottom_10px",
time: 600,
tips: true
});
});
</script>

---

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