Question

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

但现在我想点击一个元素＆＃39; /＆＃39;按钮＆＃39;触发＆＃39;滑块＆＃39;方法。当我们向左/向左拖动页面时，我想要使用浏览器方法。它将转到下一个标签。

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

像这样的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;
});

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

如何解决这个问题~~

Answer 1

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

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

这意味着使用Ratchet的内置滑块很难做到你想要的东西，所以最好还是为滑块使用别的东西。

Answer 2

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

 <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，您只能使用制表符来实现此效果。

如何从棘轮中销毁/禁用滑块？

2 个答案: