Carousel 3D

Responsive 3D carousel plugin. Loaded with options! ES6 supported. Strict mode supported. No dependencies. 2.32KB Minified.

Carousel3D v1.1.1

API:

• turn(degreeToTurnTo) // Accepts one parameter, the degree to turn to as an Int or Float
• reset() // Use after new items are injected (post instantiation) to reset the carousel

NOTE: It's up to the developer to use the turn method in association with any features he/she wants; such as: click navigating, slider navigation, keyboard navigating, swiping, spinning with an ease, etc. This is done for a smaller footprint of the core engine.

Use:

Live demo

Create as many instances as you need for each of your carousels

var c = new Carousel3D({
  carousel: '.js-carousel1 div', // Required. Container for elements; as selector string
  items: '.js-carousel1 li', // Required. Elements to move around; as selector string
  itemsPercentOf: 0.25, // Optional. Percent of items width, relative to the carousel's width
  perspective: 0.25, // Optional. Percent relative to the width; as a decimal
  depth: 0.5, // Optional. Viewing depth percent; as a decimal
  float: 'left', // Optional internationalization ordering. "Float" items to the 'left' or 'right'
  animate: 250, // Optional. Animation duration in milleconds; as an int
  fps: 60, // Optional. Frames Per Second; as an int
  opacity: 0.125, // Optional. Opacity percent; as a decimal
  grayscale: 1, // Optional. Grayscale percent; as a decimal
  sepia: 1, // Optional. Sepia percent; as a decimal
  blur: 10 // Optional. Blur in pixels; as a number
});

---

Additional Dev Snippets:

var dev = {};
dev.degree = 0;
dev.incrementBy = 360 / document.querySelectorAll('.js-carousel1 li').length;
document.querySelector('.js-carousel1 .js-left').addEventListener('click', function() {
dev.degree -= dev.incrementBy;
dev.c1.turn(dev.degree);
});
document.querySelector('.js-carousel1 .js-right').addEventListener('click', function() {
dev.degree += dev.incrementBy;
dev.c1.turn(dev.degree);
});
document.querySelector('.js-carousel1 input[type="range"]').addEventListener('input', function() {
dev.c1.turn(parseInt(this.value,10));
});
// You'll want to use the tabindex="-1" hack if you have more than one carousel
window.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
dev.degree -= dev.incrementBy;
dev.c1.turn(dev.degree);
} else if (e.keyCode === 39) {
dev.degree += dev.incrementBy;
dev.c1.turn(dev.degree);
}
});