How can I integrate this with owlcarousel?

[maxxon15]

Hi @kennethcachia,

Is there any way to integrate this with Owlcarousel? Owlcarousel loads the images as a background. The images are fullscreen and the top navigation floats over the carousel. I want to be able to change the color of the carousel content and the navigation links dynamically.

Owlcarousel events: http://www.owlcarousel.owlgraphic.com/docs/api-events.html Owlcarousel events demo: http://www.owlcarousel.owlgraphic.com/demos/events.html

What I've tried so far works only for the first slide. The colors aren't changing for the next slides. This is what I've tried so far:

// Initialize and run owl carousel
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:1,
    lazyLoad:true,
    loop:true,
    dots: true,
    callbacks: true,
    animateOut: 'fadeOut',
    onTranslated: function(){
        BackgroundCheck.destroy(); // tried destroying it after every slider animation
        initializeBgChange(); // and reinitialize it
        BackgroundCheck.refresh(); // plus refresh
    }
});

function convertImageToDataURI(img) {
      var canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;

      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      return canvas.toDataURL('image/png');
}

function checkBackgroundImage(){

    var background = document.querySelector('.owl-item.active .owl-lazy'); //owlcarousel clones some slides. ".active" is the current one that is visible. My slider has 4 slides
    var dataSrc = background.getAttribute('data-src');

    return [background, dataSrc];
}

// loads the image and initializes the backgroundCheck plugin
function initializeBgChange(){
    var img = new Image();
    img.setAttribute('crossorigin', '');

    bgDetails = checkBackgroundImage();

    background = bgDetails[0];

    img.onload = function () {
      var data = convertImageToDataURI(img);
      background.style.backgroundImage = 'url(' + data + ')';

          // Prepare BackgroundCheck
          BackgroundCheck.init({
            targets: '.owl-item.active .carousel-content, .navbar-nav li a',
            images: background,
            debug: true
          });
    };

    img.src = bgDetails[1];
}

// call the function when DOM content has finished loading
window.addEventListener('DOMContentLoaded', function () {
  initializeBgChange();

});

Apparently, the colors remains the same as it works only on the basis of the first slide. How can I get it to work for all the slides?

Thanks