如果Slick Slider(Slick.JS)在div中的点击事件中断,该如何解决?

时间:2019-01-31 14:43:15

标签: slider bigcommerce slick.js mouseclick-event jquery-click-event

我为1024px以下的任何设备添加了Slick滑块,但是,每次单击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带有click事件,但仍然没有结果。 “ .slick-initialized”类仅在发生点击事件时消失。

0 个答案:

没有答案