Skip to content

metafizzy/flickity-bg-lazyload

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Flickity background lazyload

Lazyload background images of selected cells.

Install

Add bg-lazyload.js to your scripts.

Download

bg-lazyload.js

CDN

<script src="https://unpkg.com/flickity-bg-lazyload@2/bg-lazyload.js"></script>

Package managers

npm: npm install flickity-bg-lazyload

Yarn: bower add flickity-bg-lazyload

Usage

Set data-flickity-bg-lazyload attribute of the cell to the background image's url.

<div class="carousel">
  <div class="carousel-cell" data-flickity-bg-lazyload="oranges.jpg"></div>
  <div class="carousel-cell" data-flickity-bg-lazyload="submerge.jpg"></div>
  <div class="carousel-cell" data-flickity-bg-lazyload="cat-nose.jpg"></div>
</div>

Set bgLazyLoad option.

// lazyloads background image of selected cell
// jQuery
let $carousel = $('.carousel').flickity({
  bgLazyLoad: true
});
// vanilla JS
let flkty = new Flickity( '.carousel', {
  bgLazyLoad: true
});

Set bgLazyLoad to a number to load images in adjacent cells.

bgLazyLoad: 2
// load background images in selected cell
// and next 2 cells
// and previous 2 cells

Webpack

const Flickity = require('flickity');
require('flickity-bg-lazyload');

let flkty = new Flickity( '.carousel', {
  bgLazyLoad: true
});

By Metafizzy 🌈🐻

About

Flickity lazyload background images

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •