import { Carousel } from "3d-carousel-vanilla";
<div id="carousel">
<div class="carousel-container">
<div class="carousel-item">Slide 1</div>
<div class="carousel-item">Slide 2</div>
<div class="carousel-item">Slide 3</div>
<div class="carousel-item">Slide 4</div>
<div class="carousel-item">Slide 5</div>
</div>
</div>
const carousel = new Carousel('#carousel',{
container: '.carousel-container',
items:'.carousel-item',
step: 1,
firstSlide: 0,
scale: 0.5,
opacity: 1,
autoplay: 3000,
transition: 0.3,
context:{
contextX: 1,
contextY: 0.6,
},
});
const carousel = new Carousel('#carousel',{
container: '.carousel-container'
items:'.carousel-item',
});
container - slided wrapper
container: 'your class name'
items - Required parameter for searching slides
items:'your class'
firstSlide - Parameter allows you to set the number of the initial slide (default 0)
autoplay - Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
autoplay: 3000
step - Number of slides per scrolling
step: 1
transition - time between two states of an element (default: 0.3) in sec.
context - Props for perspective (from -1 to 1)
context: { contextX: 1, contextY: 0.6, }
scale - minimum value for scale (default 1)
opacity - minimum value for opacity (default 1)
resetDefaultStyles - reser all default styles (default: false)
init() - initialize carousel
destroy() - destroy carousel
autoplay(value) - initialize autoplay
stopAutoplay() - stop autoplay
getActiveItem() - get active slide