OwlCarousel with modal window
<p>I need to use OwlCarousel+thumbnails with Magnific Popup. So I have 2 synced carousel - one for slides and one for thumbnails. After clicking to Zoom button the modal window (Magnific Popup) appears which have just a moved OwlCarousel main slider (.js-owl-carousel-synced-slides)</p>

<p>I use owl.reinit() because I need to reinitialise slider for full-width images</p>

<p>The problem is that when I clicked to Zoom button the first slide becomes active, so the slides are no longer synchronized</p>

<p>Here is the carousel on codepen - <a href="http://codepen.io/karmeljuk/pen/mOoJBZ" rel="nofollow noreferrer">http://codepen.io/karmeljuk/pen/mOoJBZ</a></p>

<p>The question is: how can I stretch the images on modal window to full-width and keep synchronized slides?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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();
       }
   }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"/&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"&gt;&lt;/script&gt;

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