Lazyload

This plugin preloads inline and background images for the specified number of next and previous slides.

Examples

Inline images

<div class="f-carousel__slide">
  <img
    data-lazy-src="https://lipsum.app/id/1/1200x675"
    width="1200"
    height="675"
    alt="Sample image"
  />
</div>

Background images

<div class="f-carousel__slide" data-lazy-bg="https://lipsum.app/id/1/1200x675">
  1
</div>

1

2

3

4

5

Usage

Include corresponding JS and CSS files:

import { Lazyload } from "@fancyapps/ui/dist/carousel/carousel.lazyload.js";
import "@fancyapps/ui/dist/carousel/carousel.lazyload.css";

Pass Lazyload to Carousel constructor or use plugins option.

const container = document.getElementById("myCarousel");
const options = {
  // Your custom options
};

Carousel(container, options, { Lazyload }).init();

Only set the src attribute for the images you want to load right away. Set data-lazy-src attribute for the images and data-lazy-bg for background images you want to lazy load. Use the preload option to determine how many next/previous slides to preload.

Supported data attributes:

• data-lazy-src
• data-lazy-srcset
• data-lazy-sizes
• data-lazy-bg

Events

Lazyload adds additional events to the Carousel:

Name	Description
lazyLoad:load	Image loading has started
lazyLoad:loaded	Image is fully loaded
lazyLoad:error	Image not loaded successfully

Options

showLoading

Show loading animation during loading

Type

boolean

Default

true

---

preload

Number of next/prev pages to preload

Type

number

Default

1