Flip Through Elements In A 3D Space – Carousel.js

Category: Javascript , Slider | April 2, 2021
Author: benkimo6i
Views Total: 601 views
Official Page: Go to website
Last Update: April 2, 2021
License: MIT

Preview:

Flip Through Elements In A 3D Space – Carousel.js

Description:

A vanilla JavaScript carousel plugin to flip through elements in a 3D space just like the Cover Flow.

Features:

  • Navigation controls.
  • Pagination bullets.
  • Transition with a sliding effect.
  • Infinite loop.

How to use it:

1. Load the needed JavaScript and CSS files in 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>

Changelog:

04/02/2021

  • disabled gallery nav and added new add slide feature

You Might Be Interested In:


One thought on “Flip Through Elements In A 3D Space – Carousel.js

  1. Eyaelia

    Hi, great slider but, how can i put more than one in the same page ? It doesn’t work when i do a copy paste 🙁

    Reply

Leave a Reply