4

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

5
  • а setPosition вызываете при загрузке страницы или при открытии попапа?
    – Cheg
    28 июл 2017 в 19:29
  • @Cheg, обновил ответ
    – word
    28 июл 2017 в 19:39
  • попробуйте вызывать setposition после открытия попапа. или вообще вызывать сам слайдер после попапа
    – Cheg
    28 июл 2017 в 19:45
  • @Cheg, а как это реализовать? т.е. как вызвать после попапа? Я привёл код magnificpopup. Как вы посоветуете в этом коде вызывать слайдер после попап?
    – word
    28 июл 2017 в 19:57
  • @Cheg, проблему решает только задержка с помощью settimeout, но даже с задержкой видно, что изначально ширина меньше, потом через долю секунду ширина слайда принимает всю ширину, что заметно на глаз и не совсем красиво. Подскажите пожалуйста, может есть какой-то более универсальный слайдер?
    – word
    29 июл 2017 в 7:40

2 ответа 2

1

magnic popup окно с начала имеет display:none.
slick не может нормально инициализироваться (рассчитать свои размеры) при таких условиях, нужно либо другой попап, или залезть в плагин и скрыть окно другими способами, но не display:none, всё сработает. Либо инициализировать Слик после открытия попапа...

0

Просто делай инициализацию слайдера при появлении попапа. Например:

$('.btn--contacts').click(function() {
    $('.modal--contacts').fadeIn();
     $(".slider__contacts").slick({
        slidesToShow: 1,
        dots: true,
      })
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.