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

Category: Javascript , Slider | July 5, 2016
Author:ashishkumar-ui
Views Total:4,031 views
Official Page:Go to website
Last Update:July 5, 2016
License:MIT

Preview:

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

Description:

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>

 

You Might Be Interested In:


Leave a Reply