FlexSlider

[h0r0m4n]

Has anyone was able to make it work with FlexSlider 2?

[albi]

nope. it will check only the first slide. although i've said "images: .flex-active-slide > img"

BackgroundCheck.init({ targets: '.flex-direction-nav a', images: '.flex-active-slide > img' });

[kennethcachia]

Sliders are tricky!

Apart from calling BackgroundCheck.init() on load, you also need to call Background.refresh() after each transition to reprocess targets. FlexSlider has an after attribute which is a function called after each slide transition, and can be used as follows:

$('.slider').flexslider({
  animation: 'slide',
  start: function () {
    BackgroundCheck.init({
      targets: '.flex-direction-nav li a',
      images: '.slides img'
    });
  },
  after: function () {
    BackgroundCheck.refresh();
  }
});

Check out this demo - code available here.

[albi]

That's exactly what I do. But it won't work with flexslider. The refresh will only check the first image and not the active slide as the debug info will show that.

[kennethcachia]

Hm.. do you have an online version that I can debug?

[albi]

For sure: http://kunden.alexanderalbrecht.ch/zeh/textseite.html debug is set to true

here is what i run for flexslider.

$('.flexslider').flexslider({
    animation: "fade",          
    easing: "swing",            
    direction: "horizontal",    
    animationLoop: true,        
    slideshow: true,            
    slideshowSpeed: 7000,       
    animationSpeed: 300,        
    pauseOnHover: true,         
    pauseInvisible: true,       
    useCSS: true,               
    touch: true,                
    controlNav: false,          
    prevText: "Vorheriges Bild",
    nextText: "Nächstes Bild",  
    keyboard: true,             

    // Callback API
    start: function(){
        BackgroundCheck.init({
            targets: '.flex-direction-nav a',
            images: '.flex-active-slide > img',
            debug: true
        });
    },
    after: function(){
        BackgroundCheck.refresh();
    }
});

[kennethcachia]

Try the following instead so that all images are processed instead of just the first (active) image:

BackgroundCheck.init({
  targets: '.flex-direction-nav a',
  images: '.slides img'
});

You should also switch to v1.1.2 as it fixes previous issues with stacked images. Demo.