javascript - 刷卡器 : Swipe to next item only with a button and to previous items manually

Question

我正在使用swiper显示一些项目。

我只想在单击按钮时滑动到下一个项目，但允许手动滑动到上一个项目。

这些是与滑动相关的选项:

allowSwipeToPrev: Set to false to disable swiping to previous slide direction (to left or top)

allowSwipeToNext: Set to false to disable swiping to next slide direction (to right or bottom)

swipeHandler: String with CSS selector or HTML element of the container with pagination that will work as only available handler for swiping

nextButton: String with CSS selector or HTML element of the element that will work like "next" button after click on it

prevButton: String with CSS selector or HTML element of the element that will work like "prev" button after click on it

如果我使用 swipeHandler 作为按钮选择器，它会按预期工作，只是我无法滑动到上一项，因为它仅作为可用处理程序滑动。无论我使用什么其他选项。

如果我将 allowSwipeToNext 设置为 false 并使用 nextButton 而不是 swipeHandler，即使我单击，它也不会滑动到下一个项目下一步按钮。

所以问题是:如何实现仅通过按钮滑动到下一个项目以及仅手动滑动到上一个项目？

Answer 1

有同样的问题并解决如下:

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();
});

希望对你有帮助!