Wondering what’s next for npm?Check out our public roadmap! »

    flickity-bg-lazyload

    1.0.1 • Public • Published

    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 🌈🐻

    Install

    npm i flickity-bg-lazyload

    DownloadsWeekly Downloads

    2,284

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    12.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar