Flickity lazyload background images
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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@1/bg-lazyload.js"></script>

Package managers

npm: npm install flickity-bg-lazyload

Bower: bower install 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
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

Webpack & Browserify

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

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

RequireJS

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

By Metafizzy 🌈🐻