jquery - 如何根据媒体查询创建和消除轮播？

Question

我有一排应该出现在我的页面上的图像，除非窗口是 320 像素或以下。如果窗口是 320 像素或更低，那么我将图像放置在轮播中。我遇到的问题是我试图弄清楚当窗口超过 320 像素时如何摆脱轮播。因此，当用户将方向从纵向更改为横向时，该场景将出现在移动设备上 这是我到目前为止的代码：

<div class="carousel">
<img src="endlessSummer_154x176.jpg">
<img src="visa_154x176_new.jpg">
<img src="lifestyle_240x176_new_v2.jpg">
<img src="nfl_cy_410x176_new.jpg">
</div>

$(window).resize(function(){    
        if ( $(".carousel").css("width") === "320px") {
            $(".carousel").carouFredSel();
        }else{
            $('.carousel').destroy();
        }
    });

Answer 1

你很接近，你需要做的就是调用触发事件来触发销毁

$(window).resize(function(){    
    if ( $(".carousel").css("width") === "320px") {
        $(".carousel").carouFredSel();
    }else{
        $('.carousel').trigger("destroy", true);
    }
});

或者，如果您不关心将事物恢复到原始顺序，则可以使用 trigger("destroy") 。