Carousel

Simple but slick carousel that works with mouse, touch and trackpad events.

Usage

Here is a basic example of how to create a new DS-Carousel by giving it a container with your slides from HTML.

index.html
``





  

    Slide #1 Title

    Slide #1 Content here. Lorem Ipsum

  

  

    Slide #2 Title

    Slide #2 Content here. Lorem Ipsum





index.js



import Carousel from 'ds-carousel';



const slides = document.querySelector('#slides');

const carousel = new Carousel(slides);





In this example, we'll create an empty DS-Carousel and then fill it using a for loop. This method might be better suited for procedurally generated carousels:



index.js



import Carousel from 'ds-carousel';



const carousel = new Carousel();

for (let i = 0; i < 3; i += 1) {

  const slide = document.createElement('div');

  slide.innerHTML =

Slide ${i}

;

  carousel.addSlide(slide);

}



document.body.appendChild(carousel.el);

``

Note: since this carousel was generated from code it still needs to be added to the DOM after initialization.

API