3D Book Flipping Image Slideshow with jQuery and CSS3 - OneBook3D

File Size: 1.97 MB
Views Total: 37252
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
3D Book Flipping Image Slideshow with jQuery and CSS3 - OneBook3D

OneBook3D is a jQuery plugin which allows you to create a responsive, flexible, beautiful image slider/slideshow with cool 3D pageflip effects. For local security reasons, some things will not work locally, but everything will work on your website. OneBook3d is supported only by: Chrome, Opera (WebKit), Firefox and Safari.


  • Auto generates a set of controls to easily navigate through your images.
  • Flexible, adaptive and responsive design with image auto resizing.
  • Dynamically add your images through JS array.
  • Fully customizable and has fullscreen mode support.

How to use it:

1. Include jQuery library and the jQuery OneBook3D plugin in the html page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.onebook3d.min.js"></script>

2. Include jQuery mousewheel plugin for mouse wheel navigation support (Optional).

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

3. Create an empty container to place the 3D book flipping slideshow.

<div id="photobook"></div>

4. Call the plugin and pass the images array. You can add as many images to array as you want. Plugin has smart loading system.

var srcDemo = [


5. Available options.

  • startPage: page that will be displayed when the book starts, default:1 
  • flip: string (’basic’,’soft’), type of the flip animation, default:’basic’
  • skin: string (’dark’,’light’), the book’s skin mode. Can be as array with two valuesfor both embedded and fullscreen plugin mode, default:’dark’
  • bgDark: text/css, set background image for ‘dark’ skin, default:’’
  • bgLight: text/css, set background image for light’ skin, default:’’
  • pageСolor: text/css, set color for all pages in book, default:’white’
  • slope: int (0 | 1 | 2), slope mode, default: 0
  • border: int, space around images, default:30
  • language: string (’en’, ‘ru’), skin language, default:’en’
  • cesh: boolean (true/false), cesh images, default:true

This awesome jQuery plugin is developed by riadesign. For more Advanced Usages, please check the demo page or visit the official website.