The Ultimate Toolbox for creating
amazing web sites!

Create a 3D Carousel with reveal.js

Here's an idea I'd like to share with you about creating a 3D carousel. This tutorial is just meant for inspiration and I'm sure it's not perfect, but with a little bit of creativity you may be able to use this is a real website. Not for beginners!
If you are not familiar with the Carousel object then please read this tutorial first:
Step 4 - 'Hack' the Carousel object
Insert a HTML object and add this code (between the head tags):

<link rel="stylesheet" href="./css/reveal.min.css">
<script src="./js/reveal.min.js"></script>
   // disable Carousel script!
   var $obj = $("#Carousel1");
   $obj.attr('id', 'CarouselHack');

   // stop Carousel timer
   var timerId = $'timerId');

   // hide the Carousel's navigation
   $("#Carousel1_back a").hide();
   $("#Carousel1_next a").hide();
   // prepare for reveal.js

   // put the slides between section tags
   var $frames = $obj.find('.frame');
   $frames.css('display', '');

   // initialize reveal
   Reveal.initialize({center: false, width: 777, height: 666, transition: 'cube', loop: false});

The code above will disable the standard Carousel script and prepare the slides for reveal.js
reveal.js has many other options so check the documentation for all the details.

Important: Make sure you change the width and height values (in the Reveal.initialize call) to match the size of your Carousel object!
Demo project
Below you will find a modified version of the 'Carousel Full Width' project that demonstrates the usage of the reveal.js framework.

Live demo:

Demo project (requires version 9.2 or higher):
Step 3 - Add a Carousel object
Insert a Carousel object and make sure the Mode is set to 'effect-fade'! This effect will not be used, but it prepares the Carousel for reveal.js!
What is reveal.js?
reveal.js is a framework for easily creating beautiful presentations using HTML with CSS3 3D transitions.
You can learn more about this great framework here:

reveal.js uses so-called 'slides' for the presentation. In this tutorial we are going to 'hack' the built-in Carousel object and with only a few lines of code convert it into a reveal.js presentation.

Step 1 - Download reveal.js
Download the latest version of the framework here:
Unpack the files to a folder on your local disk.

Step 2 - Add reveal.js to your Web Builder page
Insert a File Publisher object to your page and add the following folders from the reveal.js framework:
- css folder
- js folder
- lib folder