-2

我正在使用 Json 文件中的一些数据构建一个 Bootstrap 模式。我正在尝试在模式中包含一个带有图像的轮播。旋转木马是猫头鹰旋转木马

我让事情正常工作。但是，轮播仅在您第一次打开模式时才起作用。第二次打开任何模式时，轮播不起作用。有人有这方面的经验吗？或者是什么原因造成的？

我的代码：

if(product.images.length >= 2){
  var wqsImages = [];
  $.each(product.images, function(index, wqsThumb){
    var thumb = 'image_id_convert(wqsThumb) + '/70x70x2/image.jpg';
    var wqsImage = $('<div class="item"><a href="'+wqsThumb.url+'" class="fancybox-thumb" data-fancybox-group="group1" title="'+product.title+'"><img src="' + thumb + '" width="70" height="70" data-featured-url="'+image+'" data-original-url="'+image+'" alt="'+product.fulltitle+'" />');
   wqsImages.push(wqsImage);        
  });
  wqsImages.join('');

  ////// ONE WAY I TRIED, SO DIRECTLY FIRE OWLCAROUSEL /////

  $('.wqs-content .product-image-slider').html(wqsImages).owlCarousel({
    items: 3,
    itemsDesktop : [1199,5],
    slideSpeed: 600,
    autoPlay: 5000,
    stopOnHover: true,
    navigation: false,
    pagination: false,
    autoHeight : true
  }).data('navigationBtns', ['#product-image-slider-prev', '#product-image-slider-next']);

////// OTHER WAY I TRIED, SO FIRST APPEND CONTENT AND AFTER THAT START OWLCAROUSEL //

$('.wqs-content .product-image-slider').html(wqsImages);

 var wqsThumbSlider = $('.wqs-content .product-image-slider.owl-carousel');
  wqsThumbSlider.owlCarousel({
    items: 3,
    itemsDesktop : [1199,5],
    slideSpeed: 600,
    autoPlay: 5000,
    stopOnHover: true,
    navigation: false,
    pagination: false,
    autoHeight : true
  }).data('navigationBtns', ['#product-image-slider-prev', '#product-image-slider-next']);*/
}

有人吗？提前谢谢...

4

1 回答 1

2

在 Bootstrap 模态中使用 owl carousels 时遇到了同样的问题，现在已修复。

我假设您在 DOM 中有多个猫头鹰轮播，可以选择然后在模式中播放。

除了第一次显示 owl carousel 不再显示之外，原因是 JavaScript 后来混淆了它应该本质上“重新初始化”哪个 carousel 实例。

解决方案：在模态中专门指定轮播实例，而不是针对所有实例的“.owl-carousel”。

例如：在模态显示和轮播初始化（第一个和所有后续）...

改变

$('.owl-carousel').owlCarousel({...});

像这样的东西

$('.js-modal .owl-carousel').owlCarousel({..});
于 2014-09-02T22:31:51.923 回答