FlipBook is a plugin built on javascript which allows users to animate a book with flippable pages. This
plugin doesn't depend on any other libraries and this doesn't use JQuery. This would cut a significant
download time as this is built 800px using plain vanilla javascript.
Getting Started
Include stylesheet in head tag:
<head>
...
<link rel="stylesheet" href="flipbook-js/style.css">
...
</head>
and script in body tag:
<head>
...
<script src="flipbook-js/dist/flipbook.umd.min.js"></script>
...
</head>
Or, import from npm in your project:
Install:
npm install flipbook-js
Import in your JS/TS file:
// ES Module
import FlipBook from 'flipbook-js';
// CommonJS
const FlipBook = require('flipbook-js');
Import CSS:
import 'flipbook-js/style.css';
Create your book skeleton like this:
<div class="c-flipbook" id="FlipBook">
<div class="c-flipbook__page">
... your image here ...
</div>
<div class="c-flipbook__page">
... your image here ...
</div>
<div class="c-flipbook__page">
... your image here ...
</div>
</div>
Add 1 line of javascript to initialize:
<script>
new FlipBook('element-id');
</script>
Add jump to page functionality
<script>
window.book = new FlipBook('element-id');
book.turnPage(page); // page number to jump to
</script>
Options
<script>
new FlipBook('element-id', { // ID of element
nextButton: document.getElementById(''), // next button element
previousButton: document.getElementById(''), // previous button element
canClose: false, // book can close on its cover
arrowKeys: true, // can be navigated with arrow keys
initialActivePage: 0, // index of initial page that is opened
onPageTurn: function () {}, // callback after page is turned
initialCall: false, // should the book page calls for attention
width: '100%', // define width
height: '300px', // define height
});
</script>