Categories: 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

<!doctype html>
<html lang="en">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Horizontal examples - Sly</title>
	<meta name="viewport" content="width=device-width">
	<style type="text/css">
		body { background: #e8e8e8; }
.container { margin: 0 auto; width: 1200px; }

/* Example wrapper */
.wrap {
	position: relative;
	margin: 3em 0;

/* Frame */
.frame {
	height: 250px;
	line-height: 250px;
	overflow: hidden;
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
.frame ul li {
	float: left;
	width: 227px;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	background: #333;
	color: #ddd;
	text-align: center;
	cursor: pointer;
.frame ul li.active {
	color: #fff;
	background: #12a5f4;

/* Scrollbar */
.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
.pages li:hover {
	background: #aaa;
.pages li.active {
	background: #666;

/* Controls */
.controls { margin: 25px 0; text-align: center; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

/* Crazy example */
.crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
.crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
.crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }
	<script src="modernizr.js"></script>
	<div class="pagespan container">
		<div class="wrap">

			<div class="scrollbar">
				<div class="handle">
					<div class="mousearea"></div>

			<div class="frame" id="cyclepages">
				<ul class="clearfix">
					<li>Menu 0</li><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li><li>Menu 4</li><li>Menu 5</li><li>Menu 6</li><li>Menu 7</li>
					<li>Menu 8</li><li>Menu 9</li><li>Menu 10</li><li>Menu 11</li><li>Menu 12</li><li>Menu 13</li><li>Menu 14</li><li>Menu 15</li>
					<li>Menu 16</li><li>Menu 17</li><li>Menu 18</li><li>Menu 19</li><li>Menu 20</li><li>Menu 21</li><li>Menu 22</li><li>Menu 23</li>
					<li>Menu 24</li><li>Menu 25</li><li>Menu 26</li><li>Menu 27</li><li>Menu 28</li><li>Menu 29</li>

			<ul class="pages"></ul>

			<div class="controls center">
				<button class="btn prevPage"><i class="icon-chevron-left"></i><i class="icon-chevron-left"></i> Previous</button>

				<!-- <div class="btn-group">
					<button class="btn pause"><i class="icon-pause"></i> pause</button>
					<button class="btn resume"><i class="icon-play"></i> resume</button>
					<button class="btn toggle"><i class="icon-pause"></i> toggle</button>
				</div> -->

				<button class="btn nextPage">Next <i class="icon-chevron-right"></i><i class="icon-chevron-right"></i></button>
	<!-- Scripts -->
	<script src="jquery-2.1.3.min.js"></script>
	<script src="sly.min.js"></script>
	<script src="jquery.easing.min.js"></script>
	<script src="horizontal.js"></script>


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/

Happy Coding.

Marimuthu :