Clean jQuery Slider Plugin With Hash Tag Support - Hashslider

File Size: 1.40MB
Views Total: 1377
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Clean jQuery Slider Plugin With Hash Tag Support - Hashslider

Hashslider is a responsive and customizable jQuery Slider Plugin that has the ability to link to slider position via hash tag. It is lightweight (~3kb minified) and supports any element sliding.

How to use it:

1. Include required stylesheet file in the head section

<link href="inc/hashslider.css" rel="stylesheet" type="text/css" />

2. Create the Html. Using data-* attributes to set the data source, sliding speed and easing effects

<div id="slider" data-source="index.html" data-speed="500" data-easing="swing"> 
<ul>
<li class="hslide" data-id="hashslider"><img src="content/slide_1.png"></li>
<li class="hslide" data-id="function"><img src="content/slide_2.png"></li>
<li class="hslide" data-id="content"><img src="content/slide_3.png"></li>
<li class="hslide" data-id="features"><img src="content/slide_4.png"></li>
<li class="hslide" data-id="gopro"><img src="content/slide_5.png"></li>
</ul>
</div>

3. Include the jQuery library and jQuery Hashslider script on the page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="inc/hashslider-v2.0.js"></script>

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