- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我陷入了以下困境:
我正在使用 iDangerous Swiper 插件,效果很好。不过,我还想在同一个 iDangerous swiper 上使用 jQuery 的单击功能。
例如:
<div id="swiper-container">
<div class="swiper-slide">(lots of stuff here)</div>
<div class="swiper-slide">(lots of stuff here)</div>
<div class="swiper-slide">(lots of stuff here)</div>
<div class="swiper-slide">(lots of stuff here)</div>
</div>
和:
$('.swiper-slide').click(function() {
//more functionality here
}
问题是,滑动 slider 也会触发 jquery .click。这有点糟糕,因为在我的例子中,.click 中的函数加载另一个页面。
使用纯 html 链接也可以。然而,这并不能解决我的问题,因为我希望下一页以不可见的方式加载(不在网址栏中加载)。
有谁知道如何防止在使用 slider 时触发上述 jQuery 代码?
提前致谢:)
最佳答案
到目前为止,没有 onClickSlide
监听器,只有 onClick
,这很酷,因为它为您提供了更大的灵 active ,例如,如果您不仅想知道哪张幻灯片是点击/单击以及幻灯片中的哪个元素:
基本功能:
var swiper = new Swiper(container, {
direction: 'horizontal',
loop: true,
onClick: (swiper, event) => {
let div = swiper.clickedSlide; //slide that was clicked
}
});
扩展功能:
var swiper = new Swiper(container, {
direction: 'horizontal',
loop: true,
onClick: (swiper, event) => {
let element = event.target;
//specific element that was clicked i.e.: p or img tag
}
});
关于jquery - 如何使用 iDangerous Swiper 和 jquery .click();同时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23855240/
我正在尝试使用 swiper ( https://swiperjs.com/angular ) 以 Angular 创建旋转木马。 我收到此错误: 错误:node_modules/swiper/ang
我正在为 swiper 使用这种配置: var swiper = new Swiper('.swiper-container', { spaceBetween: 30, slidesPerVi
这几天我一直致力于在我的应用程序中设置刷卡器,但我仍然没有运气,从这里到 Github 问题或网络上的其他地方都没有找到任何工作示例。 我无法通过针对此问题的任何建议解决方案在垂直模式下设置滑动器的动
我正在使用 iDangerous Swiper 插件。我需要定期更改 ajax 方法中的所有幻灯片。执行相同操作的最佳方法是什么。 最佳答案 在 Swiper 上调用 destroy() 删除/用新幻
所以我在 friend 的推荐下使用 Swiper.js 来创建一个自动滚动的 slider 。但我无法弄清楚如何使幻灯片之间的过渡平滑。目前,当我更改自动播放 ms 时,它只会更改更改幻灯片所需的时
我想将分页元素符号从底部移动到查看区域的顶部。 目前,分页元素符号显示在所有包装器或 JavaScript 附加的幻灯片内容下方。我希望它出现在上面。 更多信息:https:/
我正在尝试为每个分页项目符号添加一个新的 element class,并且我想保留 swiper 的默认样式。所以我做的是 pagination={ clickable: true,
我有一个带有多个 slider 的简单页面。每个 slider 由三个 slider 组成;左、中、右。如果另一个 slider 发生变化,我想将所有 slider 重置到中间。可以将其想象为一个用户
我使用的是基本的刷卡器,没有任何选项。然后我的网站正文中有一个“mousemove”的监听器。我这样做是为了构建鼠标跟随器效果。这效果很好,但是当我开始拖动幻灯片时,似乎该事件将不再到达,并且我的自定
我使用的是基本的刷卡器,没有任何选项。然后我的网站正文中有一个“mousemove”的监听器。我这样做是为了构建鼠标跟随器效果。这效果很好,但是当我开始拖动幻灯片时,似乎该事件将不再到达,并且我的自定
我将 Swiper 设置为每列显示 2 行,但是当我这样做时,Swiper-Slide-Active 类未正确设置,即此类未应用于显示在中心的幻灯片 (2)滑动器的。 知道我在这里做错了什么吗?下面滑
我最近尝试在我的网站上设置“idangero.us Swiper”功能。不幸的是,它似乎不起作用。我对 JS 的经验非常有限,所以我完全不知道如何解决这个问题。 我收到的错误是Uncaught Ref
我正在使用 swiper 来显示不同的产品类别,在带有 swiper-slide 类的 div 中,以动态方式调用类别的产品。但并非所有产品都显示出来。即使溢出或高度为 100%,它也不会显示所有产品
我正在努力改变封面流程中的刷卡器幻灯片轮播。 这就是我现在得到的。 var mySwiper = new Swiper('.swiper-container-aboutus', { // Opti
我在网站上使用滑动 slider ,并且希望在只有一张幻灯片的情况下禁用它。 目前只有一张幻灯片会显示分页,您可以单击或滑动。理想情况下,如果只有一张幻灯片,则不应有任何交互。 我当前的js是:
如何删除 react-native-swiper-flatlist 最后一个 child 滑动分页点?我尝试了一些方法,但似乎不可能。请帮我。
我正在使用 Andre Ruffert 的 rangeslider.js在 iDangerous 之上 swiper.js但每次滑动我初始化的 Rangeslider 时,它也会刺激 Swiper 的
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13),但它给了我所有类型的错误。。首先,我试着像往常一样导入,从他们网站上列出的一个演示中复制过来,它显示得很好,但导航按钮不
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13),但它给了我所有类型的错误。。首先,我试着像往常一样导入,从他们网站上列出的一个演示中复制过来,它显示得很好,但导航按钮不
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13),但它给了我所有类型的错误。。首先,我试着像往常一样导入,从他们网站上列出的一个演示中复制过来,它显示得很好,但导航按钮不
我是一名优秀的程序员,十分优秀!