fancybox и slick.

964
10 февраля 2017, 05:05

Встроен слайдер slick в fancybox. Если закрыть попап окно и снова его открыть без перезагрузки страницы - пропадает кнопка закрытия этого окна и на esc также не закрывается. link Раздел "products" блок "knife"

$('.popup').fancybox({
    beforeShow: function() {
        $('#product__slider').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            dots: true,
        });
    },
});

Если вызывать функцию слайдера вне fancybox, то первый слайд отображается некорректно.

Answer 1

Когда закрываете попап, вам нужно удалять классы slick'а (slick-initialized slick-slider slick-dotted) с помощью removeClass у контейнера слайдов #product__slider.

Answer 2

После долгих копаний пришел к такому решению. Перед тем, как откроется попап-окно fancybox'a слайдер должен проинициализироваться. Поможет в этом коллбэк beforeShow.

$('.popup').fancybox({
    beforeShow: function() {
        $('#product__slider').slick('setPosition');
    },
});
$('#product__slider').not('.slick-initialized').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   dots: true,
   infinite: true,
   centerMode: false,
});
READ ALSO
Когда использовать margin и padding в CSS

Когда использовать margin и padding в CSS

Существуют ли правило или руководящий принцип при написании CSS, по которому следует использовать margin или padding для добавление отступов?

365
Медиа-запросы и псевдо-класс :lang()

Медиа-запросы и псевдо-класс :lang()

При переключении с английского на русский, ломается headerПроблема в том, что названия пунктов меню(которое в хедере) длинее названий на английском...

340
Проблемы с float

Проблемы с float

Есть формаХочу сделать так, чтобы при раскрытии описания форма растягивалась

426