Как исправить Slick Slider (Slick.JS), если он прерывается по событию click внутри div? - PullRequest
Новая
       35

Как исправить Slick Slider (Slick.JS), если он прерывается по событию click внутри div?

0 голосов
/ 31 января 2019

Я добавил слайдер Slick для любого устройства с разрешением менее 1024 пикселей, однако каждый раз, когда нажимается кнопка в элементе div и страница обновляется, слайдер исчезает, и он оставляет беспорядок.Это исправит себя, если я изменю ширину устройства с консоли.Я попытался добавить функцию для повторной инициализации при каждом нажатии кнопки, но по какой-то причине reInit не работает.Я не могу предоставить Jsfiddle, если кто-то может помочь на основе моего описания, я был бы признателен. 

function slickify(){
    event.preventDefault();
    $('.cart-list').not('.slick-initialized').slick({
        infinite: false,
        responsive: [
            {
                breakpoint: 1024,
                autoplay: false,
                dots: true,
                infinite: false,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    dots: true
                }
            },
            {
                breakpoint: 786,
                autoplay: false,
                dots: true,
                infinite: false,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true
                }
            },
            {
                breakpoint: 550,
                autoplay: false,
                dots: true,
                infinite: false,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true
                }
            }
        ]
    });
}

$(window).resize(function(){
    event.preventDefault();
    var $windowWidth = $(window).width();
    if ($windowWidth < 1024) {
        slickify();  

        $(window).resize(function() {
            $('.cart-list').slick('resize');
            event.preventDefault();
          });

          $(window).on('orientationchange', function() {
            $('.cart-list').slick('resize');
            event.preventDefault();
          });
    }
});

$('.cart-list').on('click', function() {
    $('.cart-list').slick('reInit');
});

});

Я попытался добавить простую функцию, такую ​​как:

('body').on('click', function() { ('.slick-slider-div').slick('reInit'); });

, где reInit - повторная инициализация в соответствии с документацией Slick.JS.Тем не менее, это нарушает любое событие клика на странице.Я также попытался сделать событие click только внутри div, но все еще безрезультатно.Класс .slick-initialized просто исчезает при событии щелчка.

...