Swiper：仅使用按钮滑动到下一个项目并手动滑动到上一个项目答案

【问题标题】：Swiper: Swipe to next item only with a button and to previous items manuallySwiper：仅使用按钮滑动到下一个项目并手动滑动到上一个项目
【发布时间】：2016-11-17 10:57:20
【问题描述】：

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

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

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

allowSwipeToPrev：设置为 false 以禁用滑动到上一个滑动方向（向左或向上）

allowSwipeToNext：设置为 false 以禁用滑动到下一个滑动方向（向右或底部）

swipeHandler：带有 CSS 选择器的字符串或带有分页的容器的 HTML 元素，将作为 only 可用的滑动处理程序

nextButton：带有 CSS 选择器的字符串或元素的 HTML 元素，单击后将像“下一步”按钮一样工作

prevButton：带有 CSS 选择器的字符串或元素的 HTML 元素，点击后将像“prev”按钮一样工作

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

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

所以问题是：我怎样才能实现仅使用按钮滑动到下一个项目而仅手动滑动到上一个项目？

【问题讨论】：

抱歉，如果您禁用无法滑动到下一个的 swipeToNext，这似乎是合乎逻辑的。我不明白这个问题。
@MarcosPérezGude：嗯，我只想禁用手动滑动到下一个，但继续使用按钮滑动到下一个并手动滑动到上一个。

标签： javascript swiper

【解决方案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();
});

希望对你有帮助！

【讨论】：

【解决方案2】：

禁用触摸控制：

mySwiper.disableTouchControl();

【讨论】：