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

Question

我正在使用 swiper.js

处理包含幻灯片的页面

幻灯片应该只在单击向下箭头时发生变化，不会在单击页面上的任何其他元素时，无论是文本还是页面背景，但奇怪的是, 当点击其他元素时，幻灯片在变化，我不明白为什么。

这是我展示发生了什么的视频，当我点击“seasons of change”部分然后幻灯片向上变化时，我可以清楚地看到它，在最后一个部分，当我点击几个词时然后幻灯片再次向上变化： 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，随机点击似乎消失了。我假设当您在单击的同时移动光标时，某些点击被浏览器解释为 touchmove。

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

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

slides scrolls when any part of the website is clicked

javascript

html

jquery

swiper

swiperjs