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: https://www.wysiwygwebbuilder.com/carousel.html

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: http://lab.hakim.se/reveal-js/

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: http://github.com/hakimel/reveal.js
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
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!
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>
<script>
$(document).ready(function()
{
   // disable Carousel script!
   var $obj = $("#Carousel1");
   $obj.attr('id', 'CarouselHack');

   // stop Carousel timer
   var timerId = $obj.data('timerId');
   clearInterval(timerId);

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

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

   // initialize reveal
   Reveal.initialize({center: false, width: 777, height: 666, transition: 'cube', loop: false});
});
</script>
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:
https://www.wysiwygwebbuilder.com/support/carousel3d/index.html

Demo project (requires version 9.2 or higher):
https://www.wysiwygwebbuilder.com/support/carousel3d/carousel3d.zip