September 08, 2012

jQuery Mouse Wheel Slider

This is one of the project that i created for my full time job, which i want to share this interesting jQuery Wheel slider.
If you haven see the slider before, please check out below

[button link="http://35.185.150.236/demo/jwslider/" size="small" target="self"]Demo[/button]          [button link="https://github.com/maxlibin/jwSlider" size="small" target="blank"]Download[/button]

Lets start with the basic html first
I have included 4 javascript files
jquery1.8.js
jquery.mousewheel.min.j
jquery.easing.1.3.js
Script.js (you can see the code below or download the whole package)
I have also included the html5shiv that allow me to render Html5 in older browsers.

[cc lang="html"]




we will need a few things for the html file,
two navigation button left and right
[cc lang="html"]

An item status that will show current item index
[cc lang="html"]

1/6

Now here comes the slider and the contents / text / descriptions that you like.

[cc lang="html"]

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

now you have the basic html ready here is how the html should looks, if you want to copy and paste...
[cc lang="html"]





jwslider



1/6

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.


now we need to setup the css file to hold the sliders and make it stack on top of each other.

and javascript