Extremely Simple jQuery Content Slider Plugin - jsSimpleSlide

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')">&lt;-</span> 
<span onclick="$('#slider').jsSimpleSlide('navRight')">-&gt;</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.