Flickity lazyload background images
HTML JavaScript
Latest commit 1d9db74 Sep 2, 2016 @desandro desandro committed on GitHub Merge pull request #3 from npmcdn-to-unpkg-bot/npmcdn-to-unpkg
Replace npmcdn.com with unpkg.com


Flickity background lazyload

Lazyload background images of selected cells.


Download/CDN: bg-lazyload.js

npm: npm install flickity-bg-lazyload

Bower: bower install flickity-bg-lazyload


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>

Set bgLazyLoad option.

// lazyloads backgroung image of selected cell
// jQuery
var $carousel = $('.carousel').flickity({
  bgLazyLoad: true

// vanilla JS
var 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


requirejs( [ 'path/to/flickity-bg-lazyload' ], function( Flickity ) {
  var flkty = new Flickity( '.carousel', {
    bgLazyLoad: true


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

var flkty = new Flickity( '.carousel', {
  bgLazyLoad: true

By Metafizzy 🌈🐻