无限滑块前一个按钮逻辑不起作用

我试图用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语句，它会永远被重置为0时，slideIndex等于root.numOfSlides - 2。所以，如果你点击上一个或下一个，则无关紧要，当我在幻灯片4的示例中使用slideIndex时，它将重置为零。

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

希望有人能帮助我，不知道如何解决这个问题，搜索和现在想要一些天之后。如果有什么不够清楚或者其他什么，请让我知道。在此先感谢。

来源

2017-10-15 Caspert

改变这一行：

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

来源

2017-10-20 22:31:05

无限滑块前一个按钮逻辑不起作用

回答

相关问题