JavaScript DHTML Dock Carousel Using Mootools

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
This is an awesome navigation menu with an unique and eye-catching design, operated by the famous JavaScript framework, ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Codice:
<link rel='stylesheet' href='slider.css' type='text/css' />
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Codice:
<script src="mootools-12-core.js" type="text/javascript"></script>
<script src="mootools-12-more.js" type="text/javascript"></script>
<script src="dock.js" type="text/javascript"></script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Codice:
<div id="stage-container">
		<p class="text">
			<img src="text.gif" alt="image" width="111" height="24" />
		</p> <br clear="all"/>
		
		<a href="#" id="moveleft">Left</a>

		<a href="#" id="moveright">Right</a>
		
		<div id="wrapper">
			<ul id="items">

				<li><a><img class="icon" src="1.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="2.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="3.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="4.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="5.png" alt="image" width="32" height="32" /></a></li>

				<li><a><img class="icon" src="10.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="6.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="7.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="8.png" alt="image" width="32" height="32" /></a></li>
				<li><a><img class="icon" src="9.png" alt="image" width="32" height="32" /></a></li>
									
			</ul>
		</div>
	</div>
Step 4: must download files below
Files
1.png
10.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
dock.js
left.gif
mootools-12-core.js
mootools-12-more.js
right.gif
slider.css
stage2.jpg
text.gif