Featherlight Lightbox JS issue

Im implementing Featherlight's Lightbox in my WP theme.here's the Github page for anybody interested Seems like a really nice lightbox right? (if you guys advice any others, please let me know.

I enqueued all css & js files nicely in my functions.php and it works. in the documentation is stated that I can create galleries by adding this in my theme.js (for example):

$('a.gallery').featherlightGallery({
  gallery: {
    previous: '«',
    next: '»',
    fadeIn: 300
  },
  openSpeed: 300
});

This should mean that every a on a page with the class gallery will be combined into a clickable lightbox gallery, cool! however when I do this, my Owl-carousel breaksI embedded this beautiful slider in my theme as well and would like to use this slider in combination with the lightbox!

What I found out so far:

When the code above is not included in my js file, Owl carousel has the following classes assigned: owl-carousel owl-theme owl-responsive-1199 owl-loaded note the owl-loaded
When the code above is included in my js file, the owl carousel only has the class owl-carousel, meaning is it hidden, and not loaded. It is there in my DOM, but it does not show up due to the missing classes.

I have no idea what's causing this and what else to tell you guys. I can understand you have more questions, so please ask so I can give you more info.

Thanks!

Solution

So if you are about to initialize the featherlight plugin on images contained by the owl slider, I think the problem will be in the timing.

Check out this pen

$(document).ready(function(){

  var carousel = $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    }
  });

  $('a.gallery').featherlightGallery({
    gallery: {
      previous: '«',
      next: '»',
      fadeIn: 300
    },
    openSpeed: 300
  });  

});

On the pen I have loaded both owl-carousel.min.js, feather.min.js and feather.gallery.min.js because as it says " Gallery is just a plugin for this plugin" ( Hehe, pluginception )..

So you steps:

Make sure you already have loaded all of assets
Check your js if it could find the .gallery class links
If not, lets fix it.
Customize for your needs.