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

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


7 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
  5. seydou nouroudine

    Hi Nicefull slider. But need to click on button next or prev before seeing images

    Reply

Leave a Reply