Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit 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 🌈🐻

About

Flickity lazyload background images

Resources

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.