Fancybox with owl carousel misses CSS

Question

I'm building a fancybox modal(v3) with inside it two owl carousels(v2). It's used as a product quick view function.

The problem I'm facing is that the second carousel (used for the thumbs) doesn't have core css styles applied, while the carousel is actually initialized.

So the two carousels are initialized but one just won't use styling from the actual owl-carousel.css stylesheet.

I'm completly confused.

I've created a fiddle here with the actual problem.

My html

<div id="quick-shop-modal" class="cd-quick-view" style="display:none;">
  <div class="product-images-slider">
    <div class="slider-container"></div>
    <div class="thumbnail-slider-container"></div>
  </div>
</div>


<a href="javascript:;" class="quick_view item-add-btn" title="Quick view">Quick shop</a>

Jquery

$(document).ready(function() {
  $(".quick_view").on('click', function() {
    var url = 'some-url'
    $.fancybox.open({
      touch: false,
      src: '#quick-shop-modal',
      type: 'inline',
      beforeShow: function() {
        quick_shop(url)
      }
    });
  });  
});

function quick_shop(url) {
  var $modal = $('#quick-shop-modal');

  $.getJSON(url, function(data) {
    $modal.data('product', data.product);
    var product = data.product;
    var images = '';
    $.each(product.images, function(index, image_id) {
      images += '<div class="item"><div class="content"><img src="https://via.placeholder.com/350x150" class="img-responsive"></div></div>';
    });

    $modal.find('.slider-container').html('<div id="slider" class="slider owl-carousel">' + images + '</div>')
    $modal.find('.thumbnail-slider-container').html('<div id="thumbnailSlider" class="thumbnail-slider">' + images + '</div>')
    $modal.find('.slider').owlCarousel({
      loop: false,
      nav: false,
      items: 1
    }).on('changed.owl.carousel', function(e) {
      $modal.find('.thumbnail-slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
    });
    $modal.find('.thumbnail-slider').owlCarousel({
      loop: false,
      margin: 10,
      nav: false,
      items: 3,
      stagePadding: 40
    }).on('click', '.owl-item', function() {
      $modal.find('.slider').trigger('to.owl.carousel', [$(this).index(), 300, true]);
    }).on('changed.owl.carousel', function(e) {
      $modal.find('.slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
    });

  });
}

Answer 1

1) I do not think that anyone would be able to help you without seeing live demo and probably no-one will spend time to create it for you.

2) From you code, it seems that changing one slider would trigger change callback on both sliders. IF that is true, than that could cause the issues.

3) It is not possible to tell what role of fancybox is here just by looking at those pieces of code (e.g., what is webdinge_quick_shop doing; if #webdinge-quick-shop-modal exists, then fancybox should work fine)

Edit & Answer to updated question -

Your 2nd own carousel is missing owl-carousel classname, simply add .owl-carousel to .thumbnail-slider element, see http://jsfiddle.net/zLfnmrx1/