Responsive & Touch-Enabled jQuery Slider Plugin - FerroSlider 2
File Size: | 80.3 KB |
---|---|
Views Total: | 1326 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.