jquery - 调整屏幕大小时尝试使用 flickity

Question

以下 jquery 代码是我用来在屏幕尺寸减小时为我的 div 应用 flickity slider 的代码!但这不起作用...请告诉我这段代码有什么问题:

(function($) {
    $(window).resize(function resize(){
        if ($window.width() < 700) {
            $(".container").addClass('gallery').addClass('js-flickity');
            $(".article").addClass('gallery-cell');
        }

        $(".container").removeClass('gallery').removeClass('js-flickity');
        $(".article").removeClass('gallery-cell');
    }).trigger('resize');
})(jQuery);

在这里，container 是包装 div(class:article) 的类。以下是 gallery 和 gallery-cell 的 CSS:

.gallery {
    background: #EEE;
}

.gallery-cell {
    width: 100%;
    height: 200px;
    margin-right: 10px;
    background: #8C8;
    counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
    display: block;
    text-align: center;
    content: counter(gallery-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
}

请让我知道代码的问题。谢谢

Answer 1

检查一下你应该使用默认的 Flickity 选项。

http://codepen.io/desandro/pen/xVBpqG

//在 768px 处启用上一个/下一个按钮

if ( matchMedia('screen and (min-width: 768px)').matches ) {
  options.prevNextButtons = true;
}