images dosn't appear in slider container

[alisafavieh]

first of all thanks for your great codes! I have a problem with b-lazy in product slider. the front images have not any issue but when click to slide other images dosn't show as normal as always until scroll up or down the page. I added this code to header of html and the problem solved but its ok in all browsers exept firefox. the code is : <script> window.bLazy = new Blazy({ container: '.owl-wrapper ', success: function(element){ console.log("Element loaded: ", element.nodeName); } }); </script>

on website: kazmatix.com

[alanpilloud]

I dont dont use Owl, but Slick. It has an event firing after a slide changes. Each time the slide changes, I use the revalidate method to re-run bLazy.

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

// for breviety, instantiating the carousel is not showed here

// here is how bLazy.revalidate() is used to run bLazy again
jQuery('.js-slide').on('afterChange', bLazy.revalidate);

From the Owl documentation, here is such an event :

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
    ...
})

So you could try something like

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

Hope it helps

[iamrobert]

Here's my attempt:

onTranslate: function (event) {
    bLazy.revalidate();
},

Complete Code

var owl_article2 = $('.banner').find('.owl-carousel');
//COUNT
var item_amount2 = parseInt(owl_article2.find('.itemx').length);
var true_false2 = 0;
if (item_amount2 <= 1) {
    true_false2 = false;
} else {
    true_false2 = true;
}
owl_article2.owlCarousel({
    items: 1,
    margin: 0,
    autoHeight: true,
    callbacks: true,
    responsiveClass: true,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    thumbs: false,
    video: false,
    loop: true_false2,
    touchDrag: true_false2,
    mouseDrag: true_false2,
    dots: true_false2,
    nav: false,
    onTranslate: function(event) {
        //REVALIDATE
        bLazy.revalidate();
    },
});