Extremely Simple jQuery Content Slider Plugin - jsSimpleSlide

File Size: 4.5 KB
Views Total: 1705
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.