Download
User Rating: 0/5 ( 0 votes)
ABOUT THE HASHSLIDER v2
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.
MAIN FEATURES
-
direct links to sliderpostion via hash tag
-
easy to implement
-
fully customizable
-
free for everyone
-
responsive (based on your css) NEW
-
content could be anything
-
only 2,3 kb in size
-
optimized for large amount of slides NEW
-
unique hash-names NEW
-
navigate by mousewheel PRO
-
autoslide PRO
-
autoslide time marker PRO
INTEGRATION
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">
<ul>
<li class="hslide" data-id="hashslider"></li>
<li class="hslide" data-id="function"></li>
<li class="hslide" data-id="content"></li>
</ul>
</div>
<a class="button" id="back"></a>
<a class="button" id="next"></a>
<div id="numbers"></div>
JS Tutorial
