3D Flipping Slider With JavaScript And CSS3 – 3D Flip Slider

3D Flip Slider is a lightweight and pure JavaScript library used to create a 3D flipping slider using CSS3 transitions and 3D transforms. Support both images and html contents.

How to use it:

Link to the stylesheet flip-slider.css and JavaScript flip-slider.js like this:

<link rel="stylesheet" href="flip-slider.css">
<script src="flipslide.js"></script>

Add custom content to the slider following the markup structure like this:

<div class="flip-slider">
  <div class="flip-frame">
    <div class="flip">
      <div class="slide"><img src="1.jpg" alt="" /></div>
      <div class="slide"><img src="2.jpg" alt="" /></div>
      <div class="slide"><img src="3.jpg" alt="" /></div>
      ...
    </div>
  </div>
</div>

Add a next/prev navigation control inside the slider.

<div class="nav">
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>