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.

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