时间戳

首页 > 解决方案 > 带有 owl carousel 的 Fancybox 缺少 CSS

javascript - 带有 owl carousel 的 Fancybox 缺少 CSS

问题描述

我正在构建一个fancybox modal（v3），里面有两个猫头鹰旋转木马（v2）。它用作产品快速查看功能。

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

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

我完全糊涂了。

我在这里用实际问题创建了一个小提琴。

我的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]);
    });

  });
}

标签： javascriptjqueryfancyboxowl-carouselfancybox-3

解决方案

1）我不认为任何人都能够在没有看到现场演示的情况下帮助您，并且可能没有人会花时间为您创建它。

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

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

编辑并回答更新的问题 -

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

推荐阅读