無限滑塊前一個按鈕邏輯不起作用

我試圖用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

無限滑塊前一個按鈕邏輯不起作用

回答

相關問題