Jquery slider - 停止向右滑动

Question

我用 jquery 制作了一个旋转木马滑块，其中有一些产品。我希望滑块在到达最后一个产品时停止滑动，到目前为止我能做的是在最后一个产品不可见时停止滑动，但这不是我需要的。它应该在最后一个产品可见时停止，我该如何实现？

HTML

<div class="controls">
    <div class="control-left">left</div>
    <div class="control-right">right</div>
</div>
<div class="container">
    <div class="sliderHolder">
        <div class="productsWrapper">
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
        </div>
    </div>
</div>

JQUERY

var container = $(".sliderHolder");
var containerProducts = $(".productsWrapper").width();

var animating = false;

$(document).on("click", ".control-right", function () {
    if (parseInt(container.css("right"), 10) <= containerProducts) {
        animating = true;
        container.stop().animate({
            'right': "+=401px"
        }, 600, function () {
            animating = false;
        });
    }
});


$(document).on("click", ".control-left", function () {debugger;
    if (parseInt(container.css("right"), 10) > 0) {

        animating = true;
        container.stop().animate({
            'right': "-=401px"
        }, 600, function () {
            animating = false;
        });

    }

});

$(".control-left, .control-right").click(function () {
    if (animating) {
        return false;
    }
});

CSS

.controls {
    top: 50px;
    width: 100%;
    height: 100px;
    position:relative;
}
.control-left {
    left:0;
}
.control-right {
    right:0;
}
.control-left, .control-right {
    width: 50px;
    height: 50px;
    background-color: #000;
    position: absolute;
    color: #fff;
}
.container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.productsWrapper {
    display: inline-block;

}
.sliderHolder {
    position:relative;
    width: 28000px;
    right: 0px;
}
img {
    width: 200px;
}
article {
    width: 200px !important;
    float: left;
}

Answer 1

如果您的文章始终为 200px，并且您一次滑动 2 篇文章，则您的 if-语句应为 if (parseInt(container.css("right"), 10) <= (containerProducts - 400)) 这样，它会检查是否还有两个适合。如果没有，它不会动画。

不过，你应该试着让它更有活力一点。但这回答了你的问题。

(fiddle: https://jsfiddle.net/3zcn19ms/5/)

编辑：

嘿，因为你在这个答案下面给出的评论，我稍微更改了代码。看看这是否对您有帮助：

https://jsfiddle.net/3zcn19ms/22/

现在使用第一张图片的大小（只有当所有图片的宽度完全相同时才正确）和包装中的文章数量。

Jquery slider - 停止向右滑动

Jquery slider - stop sliding right

html

jquery

slider

编辑：