Extremely Simple jQuery Content Slider Plugin - jsSimpleSlide
File Size: | 4.5 KB |
---|---|
Views Total: | 1712 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jsSimpleSlide is an extremely simple jQuery plugin for creating a very basic horizontal content slider on your web page.
Features:
- Auto play
- Easing options supported
- Adjustable duration time of sliding
- Pause on mouse over
- Left / right navigation methods
- Supports any html elements (text, image, div, etc...)
- Responsive design to fit the window's size.
How to use it:
1. Include the jQuery javascript library and jQuery jsSimpleSlide plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.jsSimpleSlide.js"></script>
2. Create an image slider using Unordered List
<ul id="slider"> <li><img src="1.jpg" alt=""/></li> <li><img src="2.jpg" alt=""/></li> <li><img src="3.jpg" alt=""/></li> ... </ul>
3. Create the html for the navigation
<span onclick="$('#slider').jsSimpleSlide('navLeft')"><-</span> <span onclick="$('#slider').jsSimpleSlide('navRight')">-></span>
4. Call the plugin with default options
<script type="text/javascript"> $(document).ready(function () { $("#slider").jsSimpleSlide({ autoplay : true, easing: "linear", duration : 800, pauseTime : 3000, height : "100px", pauseOnHover : true, navigateOnClick : false }); }) </script>
Change log:
v0.0.4 (2013-10-29)
- Issue fixes
- added option for the pause time
This awesome jQuery plugin is developed by richidd. For more Advanced Usages, please check the demo page or visit the official website.