如何解决单击网站的任何部分时,幻灯片将滚动
我正在使用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>
谢谢
解决方法
将allowTouchMove
更改为false,随机点击似乎消失了。我假设在单击时移动光标时,浏览器会将某些单击解释为触摸移动。
检出此CodePen,其中allowTouchMove
设置为“ false”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。