Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow.

Getting started

  • Clone or download the repo.
  • Open the repo and cd into your project.
  • Open index.html in your browser or run open index.html in your terminal.

Features:

  • Navigation controls.
  • Pagination bullets.
  • Transition with a glide effect.
  • infinite loop.

Must Read: A Drag-n-Drop File Upload Vanilla JS Library | SimpleDropit

How to make use of it:

1. Load the wanted JavaScript and CSS files within the HTML.

<link rel="stylesheet" href="carousel.css" />
<script src="carousel.js"></script>

2. Code the HTML for the carousel & controls.

<div class="gallery">
  <div class="gallery-container">
    <img class="gallery-item" src="1.jpg">
    <img class="gallery-item" src="2.jpg">
    <img class="gallery-item" src="3.jpg">
    <img class="gallery-item" src="4.jpg">
    <img class="gallery-item" src="5.jpg">
  </div>
  <div class="gallery-controls"></div>
</div>

See Also –

Easy Responsive Ideal Image Slider Carousel in vanilla JS
Lightweight Vanilla JS Custom HTML Slider | FakeScroll
Inertia Scroll and Parallax Effect Plugin In Vanilla JS | luxy.js


See Demo And Download

vanilla-js-carousel

Official Website(benkimo6i): Click Here

This superior jQuery/javascript plugin is developed by benkimo6i. 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….

Leave a Reply

Your email address will not be published. Required fields are marked *