Turn a CSS 3d Flip into a slideshow - html

Question

I have a simple card flip animation from this example: https://desandro.github.io/3dtransforms/docs/card-flip.html
I would like to turn this (or something similar to this) into a slideshow mechanic, where I don't just flip front and back, but multiple elements, together with a back and forth button.
How would this be possible without asynchronous loading the next or previous element?
http://codepen.io/anon/pen/qbvvyp
See the example HTML element:
<section class="container">
<div id="card">
<figure class="front">1</figure>
<figure class="back">2</figure>
<!--
How To Make this a Slideshow?
<figure class="back">3</figure>
<figure class="back">4</figure>
-->
</div>
</section>

Answer 1

I did it by using 3 separate CSS classes:
turnedLeft (turned left, -180 degrees on the Y axis)
turnedRight (turned right, 180 degrees on the Y axis)
active (facing the user, 0 degrees on the Y axis)
and 2 functions:
prevSlide: adds turnedRight to the active slide, and makes the previous element active.
nextSlide: adds turnedLeft to the active slide, and makes the next element active.
This is dynamic, and will work for any number of elements inside the "card" div!
https://jsfiddle.net/gmsitter/vuob9bnx/
HTML:
<section class="container">
<div id="card">
<figure class="active">1</figure>
<figure>2</figure>
<figure>3</figure>
<figure>4</figure>
<figure>5</figure>
</div>
</section>
<button id="previous">Previous</button>
<button id="next">Next</button>
CSS:
figure {
margin: 0px;
font-family: sans-serif;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
}
#card figure {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background: blue;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#card .turnedLeft {
-webkit-transform: rotateY( -180deg );
-moz-transform: rotateY( -180deg );
-o-transform: rotateY( -180deg );
transform: rotateY( -180deg );
}
#card .turnedRight {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card .active {
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
}
JS:
var init = function() {
var r = 1;
var slides = $("#card").children();
$('#next').click(function(){
nextSlide();
});
$('#previous').click(function(){
prevSlide();
});
function nextSlide(){
if(r<slides.length){
var activeSlide = $(".active");
activeSlide.addClass("turnedLeft");
activeSlide.removeClass("active");
activeSlide.next().addClass("active");
r++
}
}
function prevSlide(){
if(r>1){
var activeSlide = $(".active");
activeSlide.addClass("turnedRight");
activeSlide.removeClass("active");
activeSlide.prev().addClass("active");
r--
}
}
};
window.addEventListener('DOMContentLoaded', init, false);