无限滑块上一个按钮逻辑不起作用答案

【问题标题】：Infinity slider previous button logic not working无限滑块上一个按钮逻辑不起作用
【发布时间】：2017-10-15 10:45:12
【问题描述】：

我正在尝试使用 jQuery 创建一个无限滑块。活动幻灯片将是屏幕的 2/3，下一张幻灯片将是 1/3。因此，您已经看到了下一张幻灯片的预览。

我构建的滑块正在工作。当您单击next 时，滑块将向左移动。

诀窍

在初始化时，我在最后一张幻灯片之后复制了前两张幻灯片。当关注当前索引的slideIndex 是幻灯片数减1 时，它会将滑块重置为零。所以你有一个无限滑块。

问题

当我还想在您在第一张幻灯片上并单击之前应用效果时，问题就来了。它应该基本上做同样的事情，但不是将滑块重置为零，而是重置到幻灯片的末尾。

var slider = $('.slider');
var slides = slider.find('.slides').children();
var slidesW = slides.width();

root.offset = -Math.abs((root.slideIndex * slides.eq(index).width()));
console.log(root.offset);

// Update active class
slides.removeClass('active');
// slides.eq(index).addClass('active');

// Add class active
TweenMax.to(slides.eq(index), 1, {
    className: 'active', 
    onComplete: function() {

        if (root.slideIndex >= (root.numOfSlides - 2)) {

            slider.find('.slides').addClass('no-transition');

            slides.removeClass('active');
            slides.filter(':first').addClass('active');

            root.offset = 0;

            TweenMax.set(slider.find('.slides'), {
                x: root.offset, 
                onComplete: function() {
                    root.slideIndex = 0;
                    $('#footer .paging #indicator').find('span').html('01');

                    return false;
                }
            });

        } 
    }
});

// Remove no-transition class
slider.find('.slides').removeClass('no-transition');

// Change position of ul.slides
TweenMax.to(slider.find('.slides'), 0.4, {
    x: root.offset
});

因为我有一个if (root.slideIndex === (root.numOfSlides - 2)) { 的if 语句，所以当slideIndex 等于root.numOfSlides - 2 时，它将始终重置为零。因此，单击上一个或下一个都没有关系，当slideIndex 在我的示例幻灯片 4 中时，它将重置为零。

我在 codepen 中重新创建了滑块：https://codepen.io/anon/pen/zEmozr

【问题讨论】：

标签： jquery css infinity

【解决方案1】：

改变这一行：

if (dir == "ss-prev") {
    // root.slideIndex--;
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 1 : root.slideIndex - 1;
    console.log('prev', root.slideIndex);
}

作者：

if (dir == "ss-prev") {
    // root.slideIndex--;
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 3 : root.slideIndex - 1;
    console.log('prev', root.slideIndex);
}

https://codepen.io/anon/pen/xXBMZJ?editors=1111

【讨论】：