3D Flip Slider Plugin With CSS3 In Pure 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.

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 and 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:

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

Add custom content to the slider by following the coding structure:

<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>

See Demo And Download

3d-flip-slider-javascript

Official Website(ashishkumar): Click Here

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

Related Posts

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

free-angular-wysiwyg-editor

WYSIWYG Rich Text Editor For Angular Using ProseMirror

NgxEditor WYSIWYG¬†Rich Text Editor for Angular using ProseMirror. Based on the iconic font Ngx-Bootstrap and Font Awesome. ngx-editor is a simple rich text editor for Angular applications…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….