Author: | ashishkumar-ui |
---|---|
Views Total: | 4,193 views |
Official Page: | Go to website |
Last Update: | July 5, 2016 |
License: | MIT |
Preview:

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>