2

我使用 ratchet.js 来滑动许多图像。

但是现在我想点击一个元素'a'/'button'触发'slider'方法。当我们向左拖动/触摸页面时，我想破坏浏览器方法。它将转到下一个选项卡。

只允许人们通过点击按钮来跳跃。

html代码如下：

<div class="slider" id="slider">
    <div class="slide-group">
        <div class="slide">
            <img width="100%" src="/mobile/images/guide/1.jpg">
        </div>
        <div class="slide" id="slide-2">
            <img width="100%" src="/mobile/images/guide/2.jpg">
        </div>
        <div class="slide" id="slide-3">
            <img width="100%" src="/mobile/images/guide/3.jpg">
        </div>
        <div class="slide" id="slide-4">
            <img width="100%" src="/mobile/images/guide/4.jpg">
        </div>
    </div>
</div>

我尝试使用这样的代码来解决这个问题。

document.body.addEventListener('slide', function (e) {
    e.preventDefault();
    return false;
});

但它不起作用......

这个问题怎么解决~~

4

2 回答 2

0

这是滑块源代码： https ://github.com/twbs/ratchet/blob/master/js/sliders.js

看起来代码直接与触摸事件（触摸开始/移动/结束）相关联，并且它不提供手动控制幻灯片的功能。

这意味着使用 Ratchet 的内置滑块做你想做的事情是非常困难的，所以最好使用其他的滑块。

于 2015-05-01T09:41:23.340 回答
0

我刚刚通过这样的棘轮解决了这个问题..

 <div class="guide-content" id="guide">
    <div class="guide-tab active" id="slide-1">
        <img width="100%" src="/mobile/images/guide/1.jpg">
    </div>
    <div class="guide-tab" id="slide-2">
        <img width="100%" src="/mobile/images/guide/2.jpg">
    </div>
    <div class="guide-tab" id="slide-3">
        <img width="100%" src="/mobile/images/guide/3.jpg">
    </div>
    <div class="guide-tab" id="slide-4">
        <img width="100%" src="/mobile/images/guide/4.jpg">
    </div>
</div>

然后我用

window.location.href = "#slide-3";

就像 "../guide#slide-3" 显示下一页/标签页，不允许滑动切换页面。

实际上，没有 ratchet.js ，你只能使用 tabs 来实现这个效果。

于 2015-05-11T03:07:02.677 回答