Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    flickity-bg-lazyloadpublic

    Flickity background lazyload

    Lazyload background images of selected cells.

    Install

    Download/CDN: bg-lazyload.js

    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 backgroung 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.

    lazyLoad: 2
    // load background images in selected cell
    // and next 2 cells
    // and previous 2 cells

    RequireJS

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

    Browserify

    var Flickity = require('flickity-flickity-bg-lazyload');
     
    var flkty = new Flickity( '.carousel', {
      bgLazyLoad: true
    });

    By Metafizzy 🌈🐻

    install

    npm i flickity-bg-lazyload

    Downloadsweekly downloads

    457

    version

    1.0.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar