3DCube Slideshow

3DCubeSlideshow.js

// Codepen below
// https://codepen.io/paulgwamanda/pen/prdBzm

//Javascript for cube carousel slideshow animation
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()

        //autoscroll slide
        setInterval(function() {
            $(currentSlide)
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('next nav-button');
        },  5000);
        setInterval(autoStart,5000);
    }

    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
                .className += ' hidden';
        }
        else if (currentSlide === slidesNum - 1) {
            nextButton
                .className += ' hidden';
        }
        else {
            nextButton
                .className = nextButton
                .className.replace(' hidden', '');
            prevButton
                .className = prevButton
                .className.replace(' hidden', '');
        }
    }

    //control slide with keyboard
    function keyUpEv(event) {
        if (event
                .keyCode === 37) {
            goBack();
        }
        else if (event
                .keyCode === 39) {
            goNext();
        }
    }

    function showSlide(step) {
        var i = slidesNum;
        if (-1 < step && step < i) {
            while(i--) {
                slides[i]
                    .className = defClass;
            }
            slides[step]
                .className += ' current';
            if (step > 0) {
                slides[step-1]
                    .className += ' prev';
            }
            if (step + 1 < slidesNum) {
                slides[step+1]
                    .className += ' next';
            }
        }
        else {
            return false;
        }
    }

    function autoStart(){
        if (currentSlide === slidesNum - 1) {
            currentSlide=0;
        }
        goNext();
    }
    return {
        config: config,
        init: init
    };
}();

/**
 * Cross-browser Event Listener
 **/

function cb_addEventListener(obj, evt, fnc) {
    if (obj && obj.addEventListener) {
        obj.addEventListener(evt, fnc, false);
        return true;
    }
    else if (obj && obj.attachEvent) {
        return obj.attachEvent('on' + evt, fnc);
    }
    return false;
}

myPresentation.config({
    wrapper: document.getElementById('slideShow')
});
myPresentation.init();

3dCubeStyles.css

// Codepen below
// https://codepen.io/paulgwamanda/pen/prdBzm

/*=====================================================================================*/
/*Slideshow section*/

.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: 82%;
    height: 83%;
    top: 6%;
    left: 9%;
    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: 1.5s all cubic-bezier(0.260, 0.860, 0.440, 0.985);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: #ffffff;
    border-radius: 1px;
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.09);
    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;
}

slideshow-html.html

// Codepen below
// https://codepen.io/paulgwamanda/pen/prdBzm

<div class="col-md-4 text-right white-block home-block3 ">
                <div class="">
                    <div id="slideShow" class="slides-wrapper">
                        <section class="slide">
                            <div class="col-md-10 text-right mobile-text-left animated slideInLeft">
                                <h1>investors</h1>

                                <p>Cum illupta tiostiu ntempor ernatem porehenist labore pernam aut porumqui unt int everuptatque dolupta tistiunt labore pernam aut porumqui unt int everuptatque dolupta everuptatque tistiunt </p>

                                <div class="read-more-btn">
                                    <a href=""> Integrated reports
                                        <i class="fa fa-chevron-right" aria-hidden="true"></i> </a>
                                </div>

                            </div>
                        </section>
                        <section class="slide">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/AB_de_Villiers_ODI_batting_graph_with_10-innings_average.svg" class="img-responsive" alt="" />
                        </section>
                        <section class="slide">
                            <img src="http://onlinereport.co.za/firstrand/test/images/flip1.png" class="img-responsive" alt="" />
                        </section>
                        <section class="slide">
                            <img src="http://onlinereport.co.za/firstrand/test/images/flip2.png" class="img-responsive" alt="" />
                        </section>
                    </div>
                </div>
            </div>