Имеется два слайдера slick: один основной для показа товара, второй слайдер ниже с навигационными плитками thumbnail снизу (т.е. у двух слайдеров есть свойство asNavFor).
При нажатии на большое изображение товара, должно появится модальное окно magnific popup, в котором находится такой же похожий слайдер с thumbnail, немного по другому стилизован.
Не удалось воспроизвести пример в jsfiddle, потому-что сайт на фреймворке, а там куча зависимостей.
Проблема в том, что при открытии модального окна, ширина первого слайда меньше, чем ширина контейнера. А если прокрутить на следующий слайд, тогда слайды нормально выравниваются на всю ширину.
Пытался применить $('.slider-main').slick('setPosition');
чтобы выровнять слайды, но это не помогло.
Подскажите пожалуйста, в чём может быть проблема? Почему у первого слайда ширина не соответствует контейнеру?
_html.prototype.
mfpAjax = function(selector) {
selector = selector || '.js-mfp-ajax';
$('body').magnificPopup({
type: 'ajax',
delegate: selector,
removalDelay: 300,
mainClass: 'zoom-in',
callbacks: {
ajaxContentAdded: function() {
var $content = this.content || [];
if ( $content.length ) {
_self.slickHidden( $content );
}
_self.formValidation( $content );
}
}
});
};
_html.prototype.slickHidden = function() {
// //Слайдер товара
$('.js-hidden-slider-main').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
asNavFor: '.js-hidden-slider-nav',
arrows: false
});
$('.js-hidden-slider-nav').slick({
slidesToShow: 7,
slidesToScroll: 1,
dots: false,
arrows: true,
asNavFor: '.js-hidden-slider-main',
focusOnSelect: true
});
// setTimeout(function(){
$('.js-hidden-slider-main').slick('setPosition');
$('.js-hidden-slider-nav').slick('setPosition');
// },200);
}
_html это объект-хелпер, но не в нём проблема.
Выше примерный код вызова слайдера