Question

我使用Json文件中的一些数据构建Bootstrap模式。我试图在模态中包含带有图像的旋转木马。轮播是Owl carousel

我让事情发挥作用，因为它应该有效。但是，旋转木马仅在您第一次打开模态时才起作用。第二次打开任何模态时，旋转木马都会起作用。有人有经验吗？或者是什么导致这种情况？

我的代码：

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']);*/
}

任何人？ Thx提前......

Answer 1

在Bootstrap模态中有猫头鹰旋转木马存在同样的问题，现在已修复。

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

之所以超出第一次显示猫头鹰旋转木马不再显示的原因，是因为JavaScript后来混淆了哪个旋转木马实例应该基本上“重新初始化”。

解决方案：明确指定模式中的轮播实例，而不是定位所有实例的“.owl-carousel”。

例如：On modal show和carousel init（first and first follows）...

更改

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

类似

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

Carousel仅在Bootstrap模式中运行一次

1 个答案: