Question: I've been banging my head all long trying to solve this issue.

Basically I'm using Slick Carousel and Blazy lazy load together to display some background images in a carousel.

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. 

**The problem**

I can get slick and blazy working together <https://jsfiddle.net/a4emf9qu/> , 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.

Through some digging on the blazy website I see that this could be a solution but I'm unsure on how to implement it - 

*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);*

Can anyone out there help me out?

```
$(document).ready(function(){
  $('.slider').slick({
    dots: true,
    arrows: true,
    infinite: false
  });
});

;(function() {
  // Initialize
  var bLazy = new Blazy();
  bLazy.revalidate();
})();

```

Answer: 
Turn's out it was a pretty simple fix. Just had to listen to the afterChange event and then fire bLazy.revalidate(); again. Example here - <https://jsfiddle.net/a4emf9qu/1/>

```
$(".hero-slick").slick({
    dots: true,
    arrows: false,
    lazyLoad: 'ondemand',
    // autoplay: true,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
});

// Init BLazy for lazy loading

// Initialize
 var bLazy = new Blazy({ 
    container: '.hero-slick' // Default is window
});

$('.hero-slick').on('afterChange', function(event, slick, direction){
  bLazy.revalidate();
  // left
});

```
Just got stuck there and found a cool solution with selector. 

**HTML**

```
<ul class="slider">
   <li class="slide-item">
      <img class="b-lazy" data-src="image/imag.jpg">
   </li>
</ul>

```

**for Slick slider**

```
var slider = $(".slider");
slider.slick({
  lazyLoad: 'ondemand',
});

var bLazy = new Blazy({
  selector: '.b-lazy',
});

slider.on('afterChange', bLazy.revalidate);

```

**for owl carousel**

```
var owl = $('.slider');
owl.owlCarousel({
  autoplay: false,
});

owl.on('changed.owl.carousel', bLazy.revalidate);

```

check out the [**owl live**](https://codepen.io/sifulislam/full/MXOjVL/)