3D Flip Slider Plugin With CSS3 In Pure JavaScript

3d-flip-slider-javascript

3D Flip Slider is a lightweight JavaScript library used to create a flip carousel slider using CSS3 transitions and 3D transformations. Support for both images and HTML content.

responsive 3d carousel slider, 3d rotating carousel bootstrap, 3d flip carousel, 3d carousel slider javascript

Features

  • Stylish 3D flip animation
  • Pure JavaScript, no jQuery or any other JS library used
  • The file size is very light. (2.5 KB uncompressed JS version)
  • Supports images as well as HTML content
  • Highly customizable
  • CSS and JS are readable, well-commented out so that you can make your changes as per your requirements
  • Easily trigger events from external items
  • Set the starting slide indicator as per your choice

Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS
Elegant Carousel With A Wipe Switch Slider jQuery Plugin | wipeSlider

How to make use of it:

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

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

Add custom content to the slider by following the coding 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 next/previous navigation control inside the slider.

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

3D Flipping Slider Plugin/Github


See Demo And Download

Official Website(ashishkumar): Click Here

This superior jQuery/javascript plugin is developed by ashishkumar. For extra Advanced Usage, please go to the official website.

Share