Javascript 可以禁用幻灯片的触摸模拟,但不能禁用滚动条(i危险滑动)?
我的页面上有一个idangerous swiper,它成功地模拟了幻灯片和附带的滚动条上的触摸事件(允许鼠标点击和移动来向左或向右滑动幻灯片) 这很好,但我现在在swiper中调用了Dragable on the slides on the swiper,这意味着我需要停止这种触摸模拟(同时拖动幻灯片和移动幻灯片会导致混乱)-但仅在幻灯片上,而不是滚动条上(我仍然需要滚动条在鼠标单击和移动后发挥作用) 我尝试过的 根据API,我可以禁用触摸模拟:Javascript 可以禁用幻灯片的触摸模拟,但不能禁用滚动条(i危险滑动)?,javascript,jquery,swiper,Javascript,Jquery,Swiper,我的页面上有一个idangerous swiper,它成功地模拟了幻灯片和附带的滚动条上的触摸事件(允许鼠标点击和移动来向左或向右滑动幻灯片) 这很好,但我现在在swiper中调用了Dragable on the slides on the swiper,这意味着我需要停止这种触摸模拟(同时拖动幻灯片和移动幻灯片会导致混乱)-但仅在幻灯片上,而不是滚动条上(我仍然需要滚动条在鼠标单击和移动后发挥作用) 我尝试过的 根据API,我可以禁用触摸模拟: var swiper = new Swiper(
var swiper = new Swiper('.swiper', {
slidesPerView: 3,
simulateTouch: false,
scrollbar: {
container: '.swiper-scrollbar',
hide: false,
draggable: true,
snapOnRelease: true
}
});
这与预期的一样有效,但在滚动条和幻灯片上都不好
我还尝试从swiper api公开的许多事件中返回false:
var swiper=新的swiper(“.swiper”{
幻灯片视图:3,
onTouchStart:函数()
{
返回false;
},
滚动条:{
容器:'.swiper滚动条',
隐藏:错,
真的,
snapOnRelease:true
}
});代码>
这根本没有任何效果。我找到了一种方法,目前我很满意
在idangerous swiper源(idangerous.swiper-2.1.js)中,我从onTouchStart
函数(第1120行)返回false,因此我的代码现在类似于以下内容:
function onTouchStart(event) {
if (params.preventLinks) _this.allowLinks = true;
//Exit if slider is already was touched
return false;
if (_this.isTouched || params.onlyExternal) {
return false;
}
这对滚动条原型的工作方式也没有影响,因此滚动条的触摸事件保持不变。这里是Swiper-3.3.1的解决方案
simulateTouch:false
Swiper-6.6.2的解决方案
只需将“刷卡器不刷卡”添加到您不希望被刷卡的对象的类中。
然后将下面的代码添加到js文件中
const swiper = new Swiper('.swiper-container', {
noSwipingClass: 'swiper-no-swiping'
});
此选项尚未记录在案。谢谢我用这个来禁用非触摸设备上基于滑动的导航。给你一个向上投票和回答投票。我相信我的观点在当时是正确的,几年过去了,我认为你的观点更相关。