Swiper：僅用一個按鈕和以前的項目手動滑動到下一個項目

我正在使用swiper來顯示一些項目。Swiper：僅用一個按鈕和以前的項目手動滑動到下一個項目

我只想在單擊按鈕時滑動到下一個項目，但要手動滑動到之前的項目。

這些都是關係到刷卡的相關選項：

allowSwipeToPrev：設置爲false以禁用刷卡之前的滑動方向（向左或頂部）

allowSwipeToNext：設置爲false禁用向下滑動方向滑動（向右或向下）

swipeHandler：CSS with CSS選民或者分頁容器的HTML元素，將作爲僅可處理工作進行刷卡

Next按鈕：用CSS選擇器或元素的HTML元素的字符串，將點擊後的工作就像「下一步」按鈕就可以了

prevButton：用CSS選擇器或元素的HTML元素的字符串，將點擊後工作像「上一頁」按鈕就可以了

如果我使用swipeHandler爲TH e按鈕選擇器，它按預期工作，但我無法滑動到上一個項目，因爲它作爲只有可供用於滑動的處理器。無論我使用什麼其他選項。

如果我設置allowSwipeToNext爲false，並使用nextButton代替swipeHandler，也不會滑動到下一個項目，甚至當我點擊下一個按鈕。

所以問題是：我該如何才能實現僅用手指輕輕一按即可滑動到下一個項目，以及只能手動輕鬆移動到以前的項目？

來源

2016-11-17 Manolo

對不起，如果你禁用swipeToNext，你不能滑動到下一個似乎邏輯。我不明白這個問題。 –

@MarcosPérezGude：好吧，我只是想禁用**手動**滑動到下一個，但保持滑動到下一個按鈕，並手動刷到prev。 – Manolo

有同樣的問題，解決這樣的：

var swiper = new Swiper('.swiper-container', { 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 30, 
}); 
// Locks the swipe to next by default 
swiper.lockSwipeToNext(); 

$("#button_id").click(function(e){ 
    e.preventDefault(); 
    // Unlocks the swipe to next when the button is clicked 
    swiper.unlockSwipeToNext(); 
    // Swipes to the next slide 
    swiper.slideNext(); 
    // Locks the swipe to next again after moving to the next slide 
    swiper.lockSwipeToNext(); 
});

我希望它可以幫助你！

來源

2017-08-05 14:54:53

Swiper：僅用一個按鈕和以前的項目手動滑動到下一個項目

回答

相關問題