Маю потребу інтегрувати 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
