1

我正在使用 swiper.js 处理带有幻灯片的页面

幻灯片只应在单击向下箭头时更改，而不是在单击页面上的任何其他元素时更改，既不是文本也不是页面背景，但奇怪的是，当单击其他元素时，幻灯片正在更改，我没有不明白为什么。

这是一个我展示发生了什么的视频，当我点击“季节变化”部分然后幻灯片改变时可以清楚地看到，同样在最后一部分，当我点击几个单词然后幻灯片改变时再次向上： https ://z-testing.000webhostapp.com/_swiper/video.webm

这是网站的演示： https ://z-testing.000webhostapp.com/_swiper/

这是我的代码：

$(window).load(function() {

  var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: -1,
    mousewheel: true,
    preventClicks: true,
    allowTouchMove: true,
    preventClicksPropagation: true
  });

  // next slide
  $(".scrolldown").on("click", function (e) {
      e.preventDefault();
      swiper.slideNext();
      return !1;
  });

});

HTML：

<div class="swiper-container swiper-container-home">
  <div class="swiper-wrapper">
    <article class="swiper-slide">
    </article>
  </div>
</div>

谢谢

4

1 回答 1

0

更改allowTouchMove为 false 并且随机点击似乎消失了。我假设当您在单击时移动光标时，浏览器会将某些单击解释为 touchmove。

签出此CodePen，其中allowTouchMove设置为“false”。

于 2020-08-31T15:22:29.760 回答