如何添加下一个和上一个按钮 --- Turn.js答案

【问题标题】：How to add next and previous button --- Turn.js如何添加下一个和上一个按钮 --- Turn.js
【发布时间】：2014-12-24 19:53:47
【问题描述】：

使用 turn.js 创建了一个翻书演示，如果我点击角落，它就可以正常工作。

我需要添加下一个和上一个按钮，这是turns js的一个功能，但无法添加。

谁能帮帮我。

JS：

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

demo Link

【问题讨论】：

标签： javascript jquery pagination

【解决方案1】：

jQuery Turn 库支持methods 显式翻页。

为了满足您的要求，我们可以添加两个按钮，在它们上绑定点击事件，并分别调用 Turn 库方法（命名为“next”和“previous”）。

检查此working demo。

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

【讨论】：

请问如何在第一页禁用前一个标签，在最后一页禁用下一个标签。
如何将整本书水平居中？

【解决方案2】：

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

或

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

你会很开心！

新年快乐！
Сновым годом！

【讨论】：