Как добавить следующую и предыдущую кнопку --- Turn.js

Question

Создал демо-версию флипбука, используя turn.js, который работает нормально, если я коснусь углов.

Мне нужно добавить следующую и предыдущую кнопку, которая является функцией поворотов JS, но я не могу добавить ее.

Может кто-нибудь мне помочь.

JS:

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

Демо-ссылка

Answer 1

Библиотека jQuery Turn поддерживает методы для явного переворачивания страницы.

Чтобы удовлетворить ваши требования, мы можем добавить две кнопки, привязать события кликов к ним и вызвать методы библиотеки Turn (с именами "next" и "previous") соответственно.

Проверьте это рабочее демо.

HTML (добавление двух кнопок):

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

CSS (применение стилей):

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");
});

Answer 2

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

ИЛИ ЖЕ

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

И Вы будете счастливы!

С новым годом!
С новым годом!