Verticle slider DIVs

by ajinkyax

HTML

<div id="vslider">
    <div id="vslidernav">
        <ul>
            <a id="1"><li>Box 1</li></a>
            <a id="2"><li>Box 2</li></a>
            <a id="3"><li>Box 3</li></a>
            <a id="4"><li>Box 4</li></a>
            <a id="5"><li>Box 5</li></a>
        </ul>
    </div>
    <div id="vsliderboxes">
        <div id="vsliderboxs-inner">
            <div id="box1" class="active"><h1>Clean Interface Design</h1></div>
            <div id="box2" class="inactive"><h1>Efficient Code For Faster Loads</h1></div>
            <div id="box3" class="inactive"><h1>Work Within Any Budget</h1></div>
            <div id="box4" class="inactive"><h1>Less Time Building, More Time Using</h1></div>
            <div id="box5" class="inactive"><h1>Powerful Applications</h1></div>
        </div>
    </div>
</div>

CSS

#vslidernav ul {
    list-style: none;
    padding: 0;
}
#vslidernav ul a {
    padding: 0;
    cursor: pointer;
    height: 50px;
}
#vslidernav ul a:active {
    color: #9C9A99;
}
#vslidernav ul a li {
    height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
    background: transparent;
    color: #9C9A99;
}
#vslider {
    width: 1000px;
}
#vslidernav {
    float: left;
    width: 100px;
    z-index: 1;
    height: 250px;
}
#vsliderboxes {
    position : relative;
    overflow : hidden;
}
#vsliderboxes div {
    height: 250px;
    width: 900px;
}
#vsliderboxs-inner {
    position : relative;
    width    : 900px;
    height   : 250px;
}

JavaScript

$(function(){
    
    var $vsliderboxes = $('#vsliderboxes'),
        $vslidernav   = $('#vslidernav'),
        boxHeight     = $vsliderboxes.height(),
        current_index = 0;
    
    function clickslide(){
        
        //stop the slideshow for a bit so we don't get two animations too close together
        clearInterval(intervalTimer);
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(function () {
            intervalTimer = window.setInterval(autoslide, 2000);
        }, 2500);
        
        //first get the index of the clicked link
        var index = $(this).index();
        
        //set the current_index variable to keep track of the current index
        current_index = index;
        
        //then animate
        $vsliderboxes.children().stop().animate({
            top : (boxHeight * index * -1)
        }, 500);
    }
    
    function autoslide(){
        current_index++;
        //loop to beginning if necessary
        if (current_index >= $vsliderboxes.children().children().length) {
            current_index = 0;
        }
        $vslidernav.find('a').eq(current_index).trigger('click');
    }
    
    $vslidernav.find('a').click(clickslide);
    
    var intervalTimer = window.setInterval(autoslide, 2000),
        timeoutTimer  = null;
    
});