Virtual Slides

Carousel automatically populates slides from the elements found in the container. Use slides option to add additional slides to the carousel or create carousel consisting of only virtual slides.

This feature allows you to load a large number of slides. Only the visible slides are rendered without unnecessary DOM elements.

Examples

Basic example

const container = document.getElementById("myCarousel");
const options = {
  slides: [
    { html: "1" },
    { html: "2" },
    { html: "3" },
    { html: "4" },
    { html: "5" },
  ],
};

new Carousel(container, options);

Infinite slides

Here's an example of a carousel with an infinite number of slides and multiple slides per page. Additional slides are created depending on the position of the last page.

const options = {
  // Disable navigation to the left of the first slide
  infinite: false,
  // Initial slides
  slides: [
    { html: "1" },
    { html: "2" },
    { html: "3" },
    { html: "4" },
    { html: "5" },
  ],
  on: {
    render: function (instance) {
      const currentPageIndex = instance.getPageIndex();
      const pageCount = instance.getPages().length;
      const slideCount = instance.getSlides().length;

      if (currentPageIndex > pageCount - 5) {
        const slides: Partial<CarouselSlide>[] = [];

        for (let i = 1; i <= 5; i++) {
          slides.push({
            html: `${slideCount + i}`,
          });
        }

        instance.add(slides);
      }
    },
  },
};