3d flip + slick.js

HTML

<script src="http://desandro.github.io/3dtransforms/js/utils.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<div class="multiple">
    <article>

        <div class="flip-container" ontouchstart="this.classList.toggle('hover');" id="card-1">
            <div class="flipper">
                <div class="front">
                    <!-- front content -->

                            <h2>Frontal One</h2>

                            <p>Lorem Ipsum</p>

                </div>
                <div class="back">
                    <!-- back content -->

                            <h2>Back One</h2>
                            <p>Dolor sit ammet met</p


                </div>
            </div>
        </div>

        <button data-targetid="card-1" class="flip btn btn-default">Flip One</button>

    </article> <!-- first -->


    <article>

        <div class="flip-container" ontouchstart="this.classList.toggle('hover');" id="card-2">
            <div class="flipper">
                <div class="front">
                    <!-- front content -->

                            <h2>Frontal Two</h2>

                            <p>Lorem Ipsum</p>

                </div>
                <div class="back">
                    <!-- back content -->

                            <h2>Back Two</h2>
                            <p>Dolor sit ammet met</p


                </div>
            </div>
        </div>

        <button data-targetid="card-2" class="flip btn btn-default">Flip Two</button>

    </article> <!-- Two -->



    <article>

        <div class="flip-container" ontouchstart="this.classList.toggle('hover');" id="card-3">
            <div class="flipper">
                <div class="front">
                    <!-- front content -->

                            <h2>Frontal Three</h2>

                            <p>Lorem Ipsum</p>

   ...

CSS

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container.flipped .back {
		transform: rotateY(0deg);
	}
	.flip-container.flipped .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {

}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;

	width: 200px;
	height: 156px;
	margin: auto;

}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;

	border: 4px solid #323232;
	padding: 20px;
}

/*  UPDATED! front pane, placed above back */
.front {
	background: #9BA72A;
    color: white;
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	background: #fff;
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
		
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
		
	    transform: rotateX(180deg);
	}




/* slick */

.slick-prev:before, .slick-next:before {
  color: black;
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: -0;
}

JavaScript

var init = function() {
      var flippers = document.getElementsByClassName("flip");

        for(i = 0; i < flippers.length; i++){
            flippers[i].addEventListener( 'click', function(){
                var cardID = this.getAttribute('data-targetid');;
                var card = document.getElementById(cardID);
                card.classList.toggle('flipped');
      }, false);
        }
      
      
    };

    window.addEventListener('DOMContentLoaded', init, false);




<!-- slick -->
    $('.multiple').slick({
        arrows: true,
        dots: true,
        slide: 'article',
        draggable: false,

    });