Question

我使用swiper来展示一些项目。

我只想在点击按钮时滑动到下一个项目，但是让我们手动滑动到以前的项目。

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

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

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

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

nextButton ：带有CSS选择器的字符串或元素的HTML元素，其作用类似＆＃34; next＆＃34;点击它后按钮

prevButton ：带有CSS选择器的字符串或元素的HTML元素，其作用类似＆＃34; prev＆＃34;点击它后按钮

如果我使用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();
});

我希望它可以帮到你！

Answer 2

要禁用触摸控制：

mySwiper.disableTouchControl();

Swiper：仅使用按钮和手动扫描到下一个项目

2 个答案: