https://github.com/depthdev/carousel3d

Responsive 3D carousel plugin. Loaded with options! ES6 supported. Strict mode supported. No dependencies.
https://github.com/depthdev/carousel3d

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/depthdev/carousel3d
• Owner: depthdev
• License: mit
• Created: 2015-10-31T22:06:57.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-09T06:57:07.000Z (over 8 years ago)
• Last Synced: 2024-04-11T07:45:35.308Z (7 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 5
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - depthdev/carousel3d - Responsive 3D carousel plugin. Loaded with options! ES6 supported. Strict mode supported. No dependencies. (others)

README

        
# 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);

  }

});