OwlCarousel带模态窗口

Question

我需要使用带有Magnific Popup的OwlCarousel +缩略图。所以我有2个同步的旋转木马 - 一个用于幻灯片，一个用于缩略图。单击缩放按钮后，将出现模态窗口（Magnific Popup），其中只有一个移动的OwlCarousel主滑块（.js-owl-carousel-synced-slides）

我使用owl.reinit（），因为我需要为全角图像重新初始化滑块

问题是，当我点击缩放按钮时，第一张幻灯片变为活动状态，因此幻灯片不再同步

以下是codepen上的轮播 - http://codepen.io/karmeljuk/pen/mOoJBZ

问题是：如何将模态窗口上的图像拉伸到全宽并保持同步幻灯片？

＆＃13;

＆＃13;

// OWL carousel

var slides = $(".js-owl-carousel-synced-slides");
var thumbnails = $(".js-owl-carousel-synced-thumbnails");

slides.owlCarousel({
   singleItem: true,
   items: 1,
   slideSpeed: 500,
   navigation: false,
   pagination: false,
   responsive: true,
   addClassActive: true,
   transitionStyle : false,
   afterAction: syncPosition
});

thumbnails.owlCarousel({
   items: 3,
   pagination: false,
   responsive: false,
   transitionStyle : false,
   afterInit: function(element){
       element.find(".owl-item").eq(0).addClass("synced");
   }
});

function syncPosition(element){
   var current = this.currentItem;
   thumbnails
       .find(".owl-item")
       .removeClass("synced")
       .eq(current)
       .addClass("synced");
}

$(thumbnails).on("click", ".owl-item", function(element){
   element.preventDefault();
   var number = $(this).data("owlItem");
   slides.trigger("owl.goTo",number);
});


// Magnific Popup
var $owlCarouselBlock = $('.owl-carousel-block'),
   owl = $(".js-owl-carousel-synced-slides").data('owlCarousel');

$('.view').magnificPopup({
   items: {
       src: $owlCarouselBlock,
       type: 'inline'
   },
   closeBtnInside: false,
   preloader: true,
   removalDelay: 500,
   tLoading: 'Loading',
   callbacks: {
       open: function () {
           owl.reinit();
       },
       elementParse: function () {
           setTimeout(function() {
               $(".mfp-content")
                   .show()
                   .animate({
                       opacity: 1
                   }, 300);
           }, 500); // delay for synchronous loading both carousels
       },
       close: function() {
           $owlCarouselBlock
               .removeClass('mfp-hide');
           $(".mfp-content")
               .removeClass('mfp-content-load');

           owl.reinit();
       }
   }
});

＆＃13;

.owl-carousel-block {
  margin: 0 auto;
  width: 640px;
}
.owl-carousel-block .item img {
  display: block;
  height: auto;
}
.owl-carousel-block .js-owl-carousel-synced-thumbnails {
  margin-top: 20px;
}
.owl-carousel-block .js-owl-carousel-synced-thumbnails .synced img {
  border: 3px solid red;
}
.mfp-wrap .owl-carousel-block {
  width: 100vw;
}
.mfp-wrap .js-owl-carousel-synced-slides .item img {
  width: 100vw;
  height: 600px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div class="owl-carousel-block">   
   <div class="js-owl-carousel-synced-slides"> 
     <div class="item">
        <img src="http://placehold.it/640x380" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/640x380" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/640x380" alt="">
      </div> 
   </div>
   <a href="#" class="view">Zoom</a>
   
   <div class="js-owl-carousel-synced-thumbnails"> 
     <div class="item">
        <img src="http://placehold.it/160x100" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/160x100" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/160x100" alt="">
      </div> 
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;