flickity-bg-lazyload
v2.0.0
Published
Flickity lazyload background images
Downloads
12,047
Maintainers
Readme
Flickity background lazyload
Lazyload background images of selected cells.
Install
Add bg-lazyload.js
to your scripts.
Download
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 🌈🐻