Creating A Vertical Slider With jQuery

Question

How can I create a vertical slider with jQuery? Here's what I've got so far:

JSFIDDLE: http://jsfiddle.net/vkA2w/

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="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>

jQuery:

$(function(){

    boxheight = $('.box').height()
    nextbox = $('.active').next()

    function clickslide(){
    };

    function autoslide(){
        $(nextbox).animate(function(){scrollTop: boxheight}).addClass('active').prev().removeClass('active')
    };

    $('#vslidernav ul a').click(clickslide)
    window.setInterval(autoslide, 2000)

});

Why doesn't that work? The variable 'next box' picks the active box, then should select the box immediately after it. Then the autoslide function should slide it down. Then it gives itself the active class and removes it from the previous box.

But it doesn't work! Why? Thanks.

Answer 1

Demo: http://jsfiddle.net/vkA2w/4/

//cache the box elements so we don't have to look them up every iteration
var $vsliderboxes = $('#vsliderboxes').children();
function autoslide(){

    //get the current active box
    var $active = $vsliderboxes.filter('.active');

    //check to see if the current active box is the last in the slider
    if ($active.index() === ($vsliderboxes.length - 1)) {
        //we need to loop back to the beginning
        var $next = $vsliderboxes.eq(0);
    } else {
        var $next = $active.next();
    }

    //slide the active slide out of view, when that is done, remove the active class from the element
    $active.slideUp(300, function () {
        $active.removeClass('active');
    });

    //slide the next slide into view, when that is done, add the active class to the element
    $next.slideDown(300, function () {
        $next.addClass('active');
    });
}

UPDATE

As a bonus, here is a method to get the navigation links working:

function clickslide(){
    clearInterval(intervalTimer);
    clearTimeout(timeoutTimer);
    timeoutTimer = setTimeout(function () {
        intervalTimer = window.setInterval(autoslide, 2000);
    }, 2500);
    var $active = $('.active'),
        $next   = $vsliderboxes.eq($(this).index());
    if ($active[0].id !== $next[0].id) {
        $active.slideUp(300, function () {
            $active.removeClass('active');
        });
        $next.slideDown(300, function () {
            $next.addClass('active');
        });
    }
}

var intervalTimer = window.setInterval(autoslide, 2000),
    timeoutTimer;

UPDATE

Ok last update, here is a demo: http://jsfiddle.net/vkA2w/8/

JS--

$(function(){

    //cache all necessary elements, notice the use of the `var` statement so we don't create global variables for no reason
    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(){

        //increment the current index
        current_index++;

        //loop back to the beginning if necessary
        if (current_index >= $vsliderboxes.children().children().length) {
            current_index = 0;
        }

        //trigger a click on the proper index of nav elements to start the animation, this saves having to write the animation code twice
        $vslidernav.find('a').eq(current_index).trigger('click');
    }

    $vslidernav.find('a').click(clickslide);

    //save the interval timer to a variable so it can be canceled
    var intervalTimer = window.setInterval(autoslide, 2000),
        timeoutTimer  = null;

});

HTML --

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

CSS --

#vsliderboxs-inner {
    position : relative;
    width    : 900px;
    height   : 250px;
}
#vsliderboxes {
    position : relative;
    overflow : hidden;
}

Answer 2

maybe consider trying this JQuery Tools Scrollable