javascript - jQuery: scroll leftright to next div - Stack Overflow

admin管理员组

文章数量:1310237

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

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!

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 10, 2014 at 0:13 Zach Saucier 26k1212 gold badges9797 silver badges159159 bronze badges asked Jan 10, 2014 at 0:05 user1374796user1374796 1,5821313 gold badges4646 silver badges7676 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptjQuery scroll leftright to next divStack Overflow