Question

我正在使用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>

谢谢

Answer 1

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

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

单击网站的任何部分时，幻灯片将滚动

1 个答案: