Fancyapps
Return to top
On this page

Virtual slides

Carousel automatically populates slides from the elements it finds in the container. Use slides option to add new slides to the carousel or to create a carousel consisting of only virtual slides.

This feature allows you to load a large number of slides. The carousel renders only the visible slides without unnecessary DOM elements.

Examples

Basic example

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

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.

js
const options = {
  // Disable "Dots" plugin
  Dots: false,
  // Disable navigation before the first slide
  infinite: false,
  // Initially visible slides
  slides: ["1", "2", "3", "4"],
  // Create only visible slides
  preload: 0,
  on: {
    "Panzoom.beforeTransform": (instance) => {
      const viewportDim = instance.viewportDim;
      const currentPos = instance.panzoom.current.e;
      const lastPage = instance.pages[instance.pages.length - 1];

      // Pre-fill enough slides for the navigation
      if (currentPos < (lastPage.pos - viewportDim * 2) * -1) {
        const slideCount = instance.slides.length;

        instance.appendSlide([
          `${slideCount + 1}`,
          `${slideCount + 2}`,
          `${slideCount + 3}`,
        ]);
      }
    },
  },
};