FlipBook - Lightweight Non-JQuery Plugin

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.

Features

  • Lightweight, no additional javascript dependency.
  • Easy installation.
  • Can make the pages call for attention.
  • Easy navigation with arrow keys.
  • Can jump to specific page.

Browser Compatibility

  • Chrome
  • Firefox
  • Safari
  • Opera

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>

Demo

canClose=true and initialCall=true
initialPage=2 and arrowKeys=false
With previous, next button, and specific page