Slick slider в модальном окне

838
31 июля 2017, 13:09

Имеется два слайдера 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 это объект-хелпер, но не в нём проблема.
Выше примерный код вызова слайдера

READ ALSO
Ajax - послать запрос от определенного URL

Ajax - послать запрос от определенного URL

Возникла необходимость посылать запрос в ajax'e через чужой сайт, так как запросы принимаются только с негоИспользую расширение, чтобы иметь...

306
Запрос по нескольким интервалам

Запрос по нескольким интервалам

Дана таблица id | name | datetimeСуществует ли возможность сделать запрос с подсчётом количества name по нескольким интервалам времени? Например за сутки...

379
Организация множества записей в БД

Организация множества записей в БД

У нас есть бд на несколько миллионов записей почты

329
не отрабатывает условие - PHP БД

не отрабатывает условие - PHP БД

Подскажите, где ошибся?

332