horrizontal scrolling using arrows with a gap

Question

I'm using an horizontal div to display images inside li.

I would like to add an horizontal navigation using arrows (left & right). when clicking on the left arrow, my div scrolls of 156px, and when clicking on the right arrow 156px to. I tried to do this with this JS. but it's not a real scroll, and at the end of my div it keeps scrolling.

here is my JS :

$('#next_nav').click(function () {
       $( "#nav" ).css('left','-=156px');
    });
    $('#prev_nav').click(function () {
       $( "#nav" ).css('left','+=156px');
    });

here is a JSfiddle with my actual code http://jsfiddle.net/PAw8q/5/

what I'm trying to do is pretty much like this one, but I can't find how to make it work... http://jsfiddle.net/r6HwL/7/

I hope someone woulb be abble to help me with this,

thanks for your help !

Answer 1

You have 2 problems here. The first problem is that you're not really scrolling (which you've mentioned), but moving the element, which makes you see empty spaces on the sides when 'scrolling' out of the images' actual visibility.

To that, the answer is simple. Instead of using jQuery's CSS solution, you need to use jQuery Animate to actually scroll within the div, like so:

$('#next_nav').click(function () {
    $( "#nav" ).animate({
        scrollLeft: '+=156px'
    });
});
$('#prev_nav').click(function () {
    $( "#nav" ).animate({
        scrollLeft: '-=156px'
    });
});

Now we get to the second problem - the fact that the div holding the images doesn't really have boundaries. You'll need to give the image wrapper a width that's smaller than the width you gave to the nav_container div, and then give it an overflow: none property so it doesn't show the rest of the images.

Then, when the div isn't moving around and when the only thing moving is the actual scroll within it, you can see how everything falls into place:

http://jsfiddle.net/PAw8q/10/

Hope this helps. :)

Answer 2

Just like Ardethian said, I think changing the CSS of #nav:

#nav{
    position: absolute; 
    width: 967px;
    overflow: hidden;
}

But using this as the JS should solve your problem.

$("#slide").attr("src", $("li.activeSlide .image_thumbnails").attr("src"));
$('#next_nav').click(function () {
    $active = $("#nav li.activeSlide");
    $next = $active.next();
    if( $next.length > 0 ) {
        $( "#nav" ).animate({
            scrollLeft: '+=156px'
        });                    
        $active.toggleClass("activeSlide");
        $next.toggleClass("activeSlide");        
        $("#slide").attr("src", $("li.activeSlide .image_thumbnails").attr("src"));
    }
});
$('#prev_nav').click(function () {

    $active = $("#nav li.activeSlide");
    $prev = $active.prev(); 
    if( $prev.length > 0 ) {
        $( "#nav" ).animate({
            scrollLeft: '-=156px'
        });
        $active.toggleClass("activeSlide");
        $prev.toggleClass("activeSlide");  
        $("#slide").attr("src", $("li.activeSlide .image_thumbnails").attr("src"));
    }    
});

The JS will look whether it can go to the left/right and then it will animate. Finally, it will update the .activeSlide to display.

Look at the Demo for more details.