https://github.com/metafizzy/flickity-bg-lazyload
Flickity lazyload background images
https://github.com/metafizzy/flickity-bg-lazyload
Last synced: over 1 year ago
JSON representation
Flickity lazyload background images
- Host: GitHub
- URL: https://github.com/metafizzy/flickity-bg-lazyload
- Owner: metafizzy
- Created: 2016-06-24T13:31:08.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T11:08:04.000Z (almost 3 years ago)
- Last Synced: 2025-03-05T05:39:27.943Z (over 1 year ago)
- Language: HTML
- Size: 45.9 KB
- Stars: 31
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flickity background lazyload
Lazyload background images of selected cells.
## Install
Add `bg-lazyload.js` to your scripts.
### Download
[bg-lazyload.js](https://unpkg.com/flickity-bg-lazyload@2/bg-lazyload.js)
### CDN
``` html
```
### 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.
``` html
```
Set `bgLazyLoad` option.
``` js
// lazyloads background image of selected cell
// jQuery
let $carousel = $('.carousel').flickity({
bgLazyLoad: true
});
```
``` js
// vanilla JS
let flkty = new Flickity( '.carousel', {
bgLazyLoad: true
});
```
Set `bgLazyLoad` to a number to load images in adjacent cells.
``` js
bgLazyLoad: 2
// load background images in selected cell
// and next 2 cells
// and previous 2 cells
```
### Webpack
``` js
const Flickity = require('flickity');
require('flickity-bg-lazyload');
let flkty = new Flickity( '.carousel', {
bgLazyLoad: true
});
```
---
By [Metafizzy 🌈🐻](https://metafizzy.co)