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

Category: Javascript , Slider | September 11, 2022
Author:benkimo6i
Views Total:4,537 views
Official Page:Go to website
Last Update:September 11, 2022
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="carousel"></div>

3. Override the default images.

// show controls
this.carouselOptions = ['previous', 'add', 'play', 'next'];
// replace images here
this.carouselData = [
  {
    'id': '1',
    'src': '1.jpg',
  },
  {
    'id': '2',
    'src': '2.jpg',
  },
  {
    'id': '3',
    'src': '3.jpg',
  },
  {
    'id': '4',
    'src': '4.jpg',
  },
  {
    'id': '5',
    'src': '5.jpg',
  }
];
// items in view
this.carouselInView = [1, 2, 3, 4, 5];

Changelog:

09/11/2022

  • added new button styles
  • added new play method

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