jQuery滑块轮播结束答案

【问题标题】：jQuery slider carousel stop at endjQuery滑块轮播结束
【发布时间】：2015-10-13 22:00:42
【问题描述】：

好的。我正在用一些简单的 javascript 和 css3 构建一个自定义轮播。到目前为止一切正常。然而。当我继续单击下一个按钮时（当滑块结束时），它会继续没有停止功能（所以一切都会变得失焦和混乱）。 I have created a small fiddle

所有关于它的代码被缩小到以下：

function nextSlide(){
    counter++;
    var slideWidth = articleWidth*counter;
    var articles = $('#slider article.boxed').length;
    //Magic with css3
    $('.carousel>div').css('-webkit-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
    $('.carousel>div').css('-ms-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
    $('.carousel>div').css('transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
}

我已经尝试根据幻灯片（文章）的宽度/数量来计算停止位置，但我猜它会出错，我正在寻找可以与我的 css 响应式配合使用的流畅的东西（显示在小提琴）。有什么建议？ :)

【问题讨论】：

标签： jquery carousel slide

【解决方案1】：

希望以下链接对您有所帮助。

http://jsfiddle.net/YFgAM/

$('.block-13 .show-more.prev').click(function () {
var last = $('.block-13 .list li:last-child');
last.remove();
$('.block-13 .list').filter(':not(:animated)').prepend(last);

$('.block-13 .list').filter(':not(:animated)').css({
    right: '+=' + width
});

$('.block-13 .list').filter(':not(:animated)').animate({
    right: '-=' + width
});

});

【讨论】：

嗯...你的想法很好，但就我而言，我不希望我的轮播是无限的:)

【解决方案2】：

在您的 nextSlide 函数中，您可以执行以下操作：

function nextSlide(){
    if (counter + 1 == $('.carousel > div > article').length) {
        return;
    }

    counter++;

    //--------
}

Updated jsfiddle

【讨论】：

好主意。虽然这行不通。我也尝试过这种方法。如果你调整滑块的大小，你可以看到它仍然失败:)

【解决方案3】：

我在 jQuery 论坛的帮助下找到了解决方案。如果任何访问者需要知道如何做，决定在这里发布它:)

完整代码：

var counter         = 0,
    articleWidth    = 350, //Fixed width of articles, divs etc
    articles = $('#slider article.boxed').length;//Length of articles, divs etc.

function nextSlide(){
        var va = Math.floor($('.carousel').width() / articleWidth)+1;
        if (counter < articles - va) {
            counter++;
            var slideWidth = articleWidth*counter;
            //Magic with css3
            $('.carousel>div').css('-webkit-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
            $('.carousel>div').css('-ms-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
            $('.carousel>div').css('transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
        }
    }

【讨论】：