Question

How would I scroll a stack of images, horizontally, through a vertically aligned space? Imagine a layout like this:

I have a viewable area, say a div, with a fixed size (50px wide by 300px tall) and overflow set to none to hide anything outside of it…

That div has three images stacked vertically displayed inside it…

On click of a button I want to move those three images off to the left while moving in another set of three images from the right.

How do you do this? Should I create an unordered list for each set of three images and then move those UL’s using javascript? This seems to make layout difficult. How would you approach this?

Answer 1

1. Create an unordered list and fill it with list items (one for each set of three images).
2. Line the list items up next to each other inline.
3. Have a div with specific dimensions sit over this with overflow:none in the CSS to mask off the other list items.
4. Use Javascript to shift the visible set off to one side while bringing the next one into view.
5. Using jquery you can shift with the last and first selectors: li:first. Shift them using the width of the list item.

Here is a shifting function:

var Shift = function(direction){
    var dir = direction;
    var item_width = $('#carousel_ul li').outerWidth();
    var indent = parseInt($('#carousel_ul').css('left'), 10); 
    var left_indent;

    if(dir === 'after'){
        left_indent = indent - item_width;
    } else if (dir === 'before'){
        left_indent = indent + item_width;
    }else{
        return; // first list item will display but nothing moves
    }

    //make the sliding effect using jquery's animate function
    //prevent already animated elements from responding
    $('#carousel_ul:not(:animated)').animate({
        'left' : left_indent
    },500,function(){

        if(dir === 'after'){
            $('#carousel_ul li:last').after($('#carousel_ul li:first'));
        } else if (dir === 'before'){
            $('#carousel_ul li:first').before($('#carousel_ul li:last'));
        } else {
            return; // first list item will display but nothing moves
        }

        $('#carousel_ul').css({
            'left' : '-120px'
        });
    });

};