jQuery：向左/向右滚动到下一个div

Question

I have a parent .slider-wrap div at 100% width, with 3 .slider-slide-wrap child divs inside, each at 680px width. You can scroll horizontally inside the .slider-wrap div.

I've also created 2 .slider-nav divs, #slider-left sitting on the left, and #slider-right sitting on the right, the idea being, you can scroll as you wish using the scrollbar, but if you clicked the #slider-right div at any time, it would slide you across to the next instance of .slider-slide-wrap divs. Thus, the 2 .slider-nav divs will take you left and right to the next / previous instance of .slider-slide-wrap div.

jsFiddle demo: http://jsfiddle.net/neal_fletcher/rAb3V/

HTML:

<div class="slider-wrap">
    <div class="slide-wrap">
        <div class="slider-slide-wrap"></div>
        <div class="slider-slide-wrap"></div>
        <div class="slider-slide-wrap"></div>
    </div>
</div>

<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>

jQuery:

$(document).ready(function () {

    var n = $(".slider-slide-wrap").length,
        width = 680,
        newwidth = width * n;

    $('.slide-wrap').css({
        'width': newwidth
    });

});


$(document).ready(function () {
    $(".slider-slide-wrap").each(function (i) {
        var thiswid = 680;
        $(this).css({
            'left': thiswid * i
        });
    });
});

If this is at all possible? Any suggestions would be greatly appreciated!

Answer 1

First of I think you need to have an indicator to identify which slide the user has scrolled to, or which slide is currently on the viewport in order for this scroll left & right to work properly.

/*on scroll move the indicator 'shown' class to the
most visible slide on viewport
*/
$('.slider-wrap').scroll(function () {
    var scrollLeft = $(this).scrollLeft();
    $(".slider-slide-wrap").each(function (i) {
        var posLeft = $(this).position().left
        var w = $(this).width();

        if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
          $(this).addClass('shown').siblings().removeClass('shown');
        }
    });
});
/* on left button click scroll to 
   the previous sibling of the current visible slide */
$('#slider-left').click(function () {
    var $prev = $('.slide-wrap .shown').prev();
    if ($prev.length) {
        $('.slider-wrap').animate({
            scrollLeft: $prev.position().left
        }, 'slow');
    }
});
/* on right button click scroll to 
   the next sibling of the current visible slide */
$('#slider-right').click(function () {
    var $next = $('.slide-wrap .shown').next();
    if ($next.length) {
        $('.slider-wrap').animate({
            scrollLeft: $next.position().left
        }, 'slow');
    }
});

See it working of this jsfiddle .

PS. You also don't need a lot of $(document).ready() , one will do just fine and a best practice to do.