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

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


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


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


  • 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 class="gallery-controls"></div>



  • disabled gallery nav and added new add slide feature

You Might Be Interested In:

3 thoughts 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 🙁

  2. Sarthak

    Is it possible to make it scrollable via touch? Or dragged by a mouse without the next and prev buttons?


Leave a Reply