How to destroy/disable slider from ratchet?

Question

I use ratchet.js to slider many images.

But now I want to click an element 'a'/'button' trigger the 'slider' method . And I want to destory browser method when we drag/touch page to left .It will turn to next tab .

Only allow people to jump by clicking on the button.

The html code like this:

<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>

I try to use code like this to solve this problem.

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

but it does not work ...

how to solve this problem ~~

Answer 1

I just solved this problem by ratchet like this ..

 <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>

Then I used

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

Just like "../guide#slide-3" to show the next page/tab , and are not allowed to switch pages sliding by slide .

In fact, you can only use tabs to achieve this effect without ratchet.js .