Created a demo of flipbook using turn.js which is working fine if I tap on the corners.

I need to add the next and previous button which is a feature of turns js, but am unable to add it.

Can anyone help me out.

JS:

$("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true,
    next:true
});

demo Link

Created a demo of flipbook using turn.js which is working fine if I tap on the corners.

I need to add the next and previous button which is a feature of turns js, but am unable to add it.

Can anyone help me out.

JS:

$("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true,
    next:true
});

demo Link

• javascript
• jquery
• pagination

2 Answers 2

jQuery Turn library supports methods to explicitly turn the page.

To fulfill your requirement, we can add two buttons, bind click events on them and call the Turn library methods (named "next" and "previous") respectively.

Check this working demo.

HTML (adding two buttons):

<div class="flip-control">
    <a href="#" id="prev"> Previous </a>
    <a href="#" id="next"> Next </a>
</div>

CSS (applying styles) :

div.flip-control {
    width: 400px;
    text-align: center;
}

div.flip-control a {
    margin-left: 10px;
}

JavaScript :

var oTurn = $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true,
    next:true
});

$("#prev").click(function(e){
    e.preventDefault();
    oTurn.turn("previous");
});

$("#next").click(function(e){
    e.preventDefault();
    oTurn.turn("next");
});

$('.sj-book').turn('previous');

OR

$('.sj-book').turn('next');

And You will be happy!

Happy New Year!
С новым годом!