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

Category: Javascript , Slider | April 2, 2021
Author:benkimo6i
Views Total:7,569 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:


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

    Reply
  2. Sarthak

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

    Reply
  3. adads

    carousel.js:53 Uncaught TypeError: Cannot read property ‘appendChild’ of null
    at carousel.js:53
    at Array.forEach ()
    at Carousel.setControls (carousel.js:52)
    at carousel.js:95

    Reply
  4. Bitdev

    Really great slider!! Please let me know how to enable auto looping of gallery items, and stop looping when at mouse hover.

    Thanks!!

    Reply

Leave a Reply