1 Востаннє редагувалося karmeljuk (20.12.2016 15:06:26)

Тема: OwlCarousel в попапі

Маю потребу інтегрувати OwlCarousel та Magnific Popup
При цьому OwlCarousel в мене має мініатюри - по суті це дві синхронізовані каруселі
Проблема виникає, коли клікаю на кнопку Zoom - в даному випадку мені потрібно мати великі слайди на всю ширину, що задається  через css

      
.item img {
         width: 100vw;
         height: 600px;
}

Проблема в тому, що в такому випадку плагін каруселі не знає про зміну розміру слайдів, і вони гортаються по старим відступам - на практиці це на пів-слайда. Щоб перевантажити слайдер після відкриття попапа я прописав owl.reinit(); . Все ніби чудово, але тут виникає нова проблема - після перевантаження каруселі плагін забуває, який саме слайд був активним, тобто синхронізація збивається

Питання ось в чому: як реалізувати правильну роботу каруселі в папапі зі збереженням синхронізації?

JS код ініаціалізації каруселі:

Прихований текст
// 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();
       }
   }
});

Код каруселі можна подивитися тут:
http://codepen.io/karmeljuk/pen/mOoJBZ

Подякували: 221VOLT1

2

Re: OwlCarousel в попапі

Щось не густо з відповідями. Невже на форумі немає js-спеціалістів?