title: Some lazy load background images (b-lazy) not showing in slick carousel
body: <p>I've been banging my head all long trying to solve this issue.</p>
  
  <p>Basically I'm using Slick Carousel and Blazy lazy load together to display some background images in a carousel.</p>
  
  <p>Now before you answer, I'm well aware Slick comes with lazy loading, but I've run in to problem using it with background images so I'm running with Blazy instead. </p>
  
  <p><strong>The problem</strong></p>
  
  <p>I can get slick and blazy working together <a href="https://jsfiddle.net/a4emf9qu/" rel="noreferrer">https://jsfiddle.net/a4emf9qu/</a> , no worries, but when you drag (or click on the dot controls) to the third image (or beyond) the background images don't load unless you scroll or resize the window and I just don't know why.</p>
  
  <p>Through some digging on the blazy website I see that this could be a solution but I'm unsure on how to implement it - </p>
  
  <p><em>Either call revalidate which validates the document again or trigger the newly added item(s) with the .load() method:
  var bLazy = new Blazy();
  bLazy.functionName(); //bLazy.revalidate(); or bLazy.load(element);</em></p>
  
  <p>Can anyone out there help me out?</p>
  
  <pre><code>$(document).ready(function(){
    $('.slider').slick({
      dots: true,
      arrows: true,
      infinite: false
    });
  });
  
  ;(function() {
    // Initialize
    var bLazy = new Blazy();
    bLazy.revalidate();
  })();
  </code></pre>