Stylish jQuery Slider Plugin with 3D Flip Effects - Rocket Page Flip

Rocket Page Flip is a stylish jQuery slider plugin which allows you to navigate between Html elements with 3D flip effects. The flip effect is created via CSS 3D transforms so the plugin works well on modern browsers. Old browsers will just show/hide elements. Check out the fullpage demo to see how the plugin acts as a page slider.

Basic Usage:

1. Add the required pageflip.css into the head section of your document.

<link rel="stylesheet" href="css/pageflip.css">

2. Make sure to load the jQuery Rocket Page Flip plugin's script after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/pageflip.js"></script>

3. Create a set of Html elements for the slider. You can add images into this slider using background property.

<div class="pageflip">
  <div class="page page-current" style="background: #209657 url('img/1.jpg') no-repeat center center"> </div>
  <div class="page" style="background: #0387A5 url('img/2.jpg') no-repeat center center"> </div>
  <div class="page" style="background: #A5C8CB url('img/3.jpg') no-repeat center center"> </div>
  ...
</div>

4. Initialize the plugin with one JS call.

var pageflip = new RocketPageFlip('.pageflip');

5. Available options.

current: 0, // page to display
navigation: true, // show pagination
directionalNav: true, // show prev/next navigation buttons
prevText: 'prev', // text for prev button
nextText: 'next' // text for next button

Change log:

2014-09-04

• hack for safari

---

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