javascript - Swiper.js 与 Rangeslider.js - 在 Rangeslider.js onSlide 回调函数上禁用 Swiper.js 触摸事件

标签 javascript jquery swiper.js rangeslider

我正在使用 Andre Ruffert 的 rangeslider.js在 iDangerous 之上 swiper.js但每次滑动我初始化的 Rangeslider 时,它也会刺激 Swiper 的触摸滑动事件,因此两者同时滑动。当我滑动 Rangeslider 时,我可以使用任何方法来禁用 Swiper 吗?我是 jQuery 新手,因此我们将不胜感激。

这是我的代码:

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!--First Slide-->
    <div class="swiper-slide"> 
    <input type="range" class="rangeslider"/>
  </div>

  <!--Second Slide-->
  <div class="swiper-slide">
    <h2>Slide 2</h2>
  </div>

  <!--Etc..-->

JS

var mySwiper = $('.swiper-container').swiper({

mode:'horizontal',
loop: true

});

$('input[type="range"]').rangeslider({

polyfill: false,

// Callback function
onSlide: function(position, value) {},

// Callback function
onSlideEnd: function(position, value) {}
});

最佳答案

将 swiper-no-swiping 类添加到范围 slider :

$('input[type="range"]').addClass('swiper-no-swiping');

关于javascript - Swiper.js 与 Rangeslider.js - 在 Rangeslider.js onSlide 回调函数上禁用 Swiper.js 触摸事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24030704/

相关文章:

PHP 事件源继续执行

javascript - 页面刷新时显示 SWIPER JS API 的中间幻灯片

javascript - 如何在 JS 插件中使值 "get from my JS"而不是默认值 "get from CSS"?

javascript - 带幻灯片的主体锁定全屏部分

javascript - JQuery 可排序 : Can I treat two rows as one row when dragging to another position?

javascript - 多用途和可重用的 JavaScript 倒数计时器

javascript - 我的导航栏没有保持粘性

javascript - 防止 onchange 在输入上触发

javascript - 使用 css 或 js 突出显示半高文本

javascript - 检测溢出 :hidden page? 中的滚动尝试