Question

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

(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;
}

Answer 2

据我了解你的代码，它是这样的：

如果window.width＆lt; 700添加一些类然后删除你刚刚添加的类

你的代码总是删除这些类！：d

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

2 个答案: