3D Cube slideshow Carousel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
        <div class="">
            <div class="">
                <div class="col-md-4">
                    <div class="grey-bordered" style="height: 300px;">
                        <div id="slideShow" class="slides-wrapper">
                            <section class="slide">
                                Section 1
                            </section>
                            <section class="slide">
                                Section 2
                            </section>
                            <section class="slide">
                                Section 3
                            </section>
                            <section class="slide">
                                Section 4
                            </section>
                            <section class="slide">
                                Section 5
                            </section>
                            <section class="slide">
                                Section 6
                            </section>
                        </div>
                    </div>
                </div>
            </div>
    </div>

CSS

.slideshow-container {
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;
    overflow: hidden;
    min-height: 500px;
    min-width: 300px;
    background: #ffffff;
    position: absolute;
    width: 100%;
    height: 100%;
}

.hidden {
    display: none;
}

.slides-wrapper {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 700px;
    -webkit-perspective-origin: 50% 100px;
    -webkit-transform: translateZ(0);
    transform-style: preserve-3d;
    perspective: 700px;
    perspective-origin: 50% 100px;
    transform: translateZ(0);
    position: absolute;
    width: 60%;
    height: 54%;
    top: 25%;
    left: 18%;
    z-index: 2;
}

.slide {
    width: 100%;
    min-height: 100%;
    max-height: 120%;
    line-height: 1.5;
    position: absolute;
    opacity: 0;
    font-size: 1em;
    color: #000;
    left: 0;
    -webkit-transition: 0.7s all cubic-bezier(0.260, 0.860, 0.440, 0.985);
    transition: 0.7s all cubic-bezier(0.260, 0.860, 0.440, 0.985);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: #ffffff;
    border-radius: 1px;
    border: 1px solid grey;
    /* box-shadow: 0 0 20px 10px #000; */
    box-sizing: border-box;
    padding: 5%;
    overflow: hidden;
}

.slide.current {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 125px);
    transform: translate3d(0, 0, 125px);
}

.slide.next {
    opacity: 0;
    -webkit-transform: rotateY(90deg) translate3d(-20%, 0, 155px);
    -webkit-transform-origin: top left;
    transform: rotateY(90deg) translate3d(0, 0, 125px);
    transform-origin: top left;
    left: 80%;
}

.slide.prev {
    -webkit-transform: rotateY(-90deg) translate3d(20%, 0, 155px);
    -webkit-transform-origin: top right;
    transform: rotateY(-90deg) translate3d(0, 0, 125px);
    transform-origin: top right;
    opacity: 0;
    left: -80%;
}

.slide ul,
.slide ol {
    margin: 1em 0;
}

.slide li {
    list-style-position: inside;
}

.nav-button {
    position:...

JavaScript

//Javascript for cube animations
var myPresentation = function() {
    var wrapper = null;
    var defClass = null;
    var slides = null;
    var slidesNum = null;
    var nextButton = document.createElement('a');
    var prevButton = document.createElement('a');
    var currentSlide = parseInt(window.location.hash.replace('#', '') || 0);

    function config(_params) {
        var params = _params || {};
        wrapper = params.wrapper || document.getElementById('slideShow');
        slides = params.slides || wrapper.getElementsByClassName('slide');
        slidesNum = slides.length;
        defClass = params.defClass || 'slide';
    }

    function init() {
        if (!wrapper) {
            config();
        }
        document
            .body
            .appendChild(nextButton);
        document
            .body
            .appendChild(prevButton);
        nextButton
            .className = 'next nav-button';
        prevButton
            .className = 'prev nav-button';
        cb_addEventListener(nextButton, 'click', goNext);
        cb_addEventListener(prevButton, 'click', goBack);
        cb_addEventListener(document, 'keyup', keyUpEv);
        showSlide(currentSlide);
        checkButtons()
        setInterval(function() {
            $(currentSlide)
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('next nav-button');
        },  3000);

    }

    function goNext() {
        if (slides[currentSlide + 1]) {
            ++currentSlide;
            step();
        }
    }
    function goBack() {
        if (slides[currentSlide - 1]) {
            --currentSlide;
            step();
        }
    }
    function step() {
        showSlide(currentSlide);
        window
            .location
            .hash = currentSlide;
        checkButtons();
        return false;
    }
    function checkButtons() {
        if (currentSlide === 0) {
            prevButton
       ...