Jquery

Horizontal menu slider using sly js

Horizontal menu slider using sly js

sly js is one of the javascript libraray which has a advanced one-directional scrolling with navigation item. In my application I have dynamic menus which has more than 30 menus,
I dont want to show menus in multiple lines, Just I wanna show all my menus in one line, thats like a next preveious slider, aflter long search I have found a powerful API called sly js.

 

Which has a mutilple scrolling type.

Scrolling Types :

1. Horizontal.
2. Verticle.
3. FUll page.
4. Infinite Scrolling.
5. Parallax Scrolling.

Here we are going to see how the Horizontal menu scrolling is going to work.

To implement this we need following Jquery APIs

1. jquery-2.1.3.min.js
2. modernizr.js
3. sly.min.js
4. jquery.easing.min.js
5. horizontal.js

Demo Code

You have 7 different type of horizontal slider in sly js

1. Basic – with all the navigation options enabled => It will show all the options available in sly js
2. Centered – activated or middle item is centered when possible => The centered item of the container will be in active state.
3. Force Centered – active item is always centered, and middle item is always activated
4. Cycling by items – 1 second interval, enabled pause on hover
5. Cycling by pages – starts paused, 1 second interval, enabled pause on hover =>The example which shows above.
6. One item per frame => It will plays like an image slider which shows the item one by one.
7. Crazy – smart navigation with each item having a different size and margins

Example of remaining above shows in sly js documentation => http://darsa.in/sly/examples/horizontal.html
For more details look at : http://darsa.in/sly/

Thanks!.
Happy Coding.