This jquery-based slider does what the most jquery-sliders do, but adds a hashtag to the window location, so you can link to any content / position of the slider.

For example: http://yoururl.com/slider.html#features will save the position of the slider to the "features"-slide.

The updated version comes a long with some major updates and bugfixes. The content can now be loaded from an extern .html-file what makes the performance much better, even when you have dozen of slides. The slider also works now in a "loop". The Hashslider Pro got some more features and can be purchased for a donation of 2.5 dollars. Read more here.



Grab the latest version of jquery, download and integrate the hashslider.js and the hashslider.css. Then use following HTML code and then style it up as you wish with css.

Note: it's important to give the #slider and the .hslide a specific width! All list-elements in the slider should have the class .hslide and a unique data-id.

You got to make three adjustments in the html: data-source for an external-loaded slides (link to the document itself if you dont want extern-loading) and data-speed for the speed of the animation. Also set the easing-property. All items in the list should have an unique ID.

<div id="slider" data-source="index.html" data-speed="500" data-easing="swing">
		<li class="hslide" data-id="hashslider"></li>
		<li class="hslide" data-id="function"></li>
		<li class="hslide" data-id="content"></li>

<a class="button" id="back"></a>
<a class="button" id="next"></a>
<div id="numbers"></div> 


The hashslider v2 is released under the DBAD public license. Learn more here.


minified script download and css download

rar-package with the script, the css and a example integration download


comments powered by Disqus