带有 owl 个旋转木马的 Fancybox 未命中 CSS

Question

我正在构建一个 fancybox modal(v3)，里面有两个 owl carousels(v2)。用作产品快速查看功能。

我面临的问题是第二个转盘（用于拇指）没有应用核心 css 样式，而转盘实际上已初始化。

所以两个轮播都已初始化，但其中一个不会使用实际 owl-carousel.css 样式表中的样式。

我完全糊涂了。

我在这里创建了一个 fiddle 来解决实际问题。

我的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) 我不认为没有人能在没有看到现场演示的情况下帮助您，并且可能没有人会花时间为您创建它。

2) 从您的代码看来，更改一个滑块似乎会触发两个滑块的 change 回调。如果这是真的，那可能会导致问题。

3) 仅仅通过查看那些代码片段是不可能知道 fancybox 在这里的作用的（例如，webdinge_quick_shop 在做什么；如果 #webdinge-quick-shop-modal 存在，那么 fancybox 应该工作正常）

编辑并回答更新的问题 -

您的第二个轮播缺少 owl-carousel 类名，只需将 .owl-carousel 添加到 .thumbnail-slider 元素，参见 http://jsfiddle.net/zLfnmrx1/

带有 owl 个旋转木马的 Fancybox 未命中 CSS

Fancybox with owl carousel misses CSS

javascript

jquery

fancybox

owl-carousel

fancybox-3