JavaScript JavaScript DHTML Dock Carousel Using Mootools

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

Demo: JavaScript JavaScript DHTML Dock Carousel Using Mootools

​

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

Code:

<link rel='stylesheet' href='slider.css' type='text/css' />

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

<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: Place HTML below in your BODY section
HTML

Code:

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

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator​