Question

我正在构建一个带有两个猫头鹰轮播（v2）的fancybox modal（v3）。用作产品快速查看功能。

我面临的问题是第二个轮播（用于拇指）没有应用核心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/

带猫头鹰轮播的Fancybox错过了CSS

1 个答案: