CarouFREDSel插件：媒体查询在旋转木马中触发可调整大小的图像

Question

我有这个轮播作为wordpress插件，看起来像这样（完整的浏览器窗口宽度）：

当我调整浏览器窗口大小时，图像的大小是相同的，直到触发媒体查询：

@media screen and (min-width: 1470px) {
    #image-carousel { height: 500px; }
    #carousel-images img { width: 980px; height: 500px; }

    #prev, #next { height: 500px; }
    #prev { left: -490px; }
    #next { right: -490px; }
}

@media screen and (min-width: 500px) and (max-width: 1470px) {
    #image-carousel { height: 383px; }
    #carousel-images img { width: 750px; height: 383px; }

    #prev, #next { height: 383px; }
    #prev { left: -375px; }    
    #next { right: -375px; }
}

然后我调整需要调整大小的div，并且图像正确缩小，但是会发生这种情况： 图像是＆＃34;未中和＆＃34;。在创建旋转木马时发生的某些过程（自然地）不被触发。我现在解决这个问题的方法是这样的:(我知道javascript不是干的，这只是一个例子）

onCreate: function (data) {
    $(window).resize( function () {
        if( $(window).width() > 1470 ) {
            $(".dev7-caroufredsel-carousel").carouFredSel({
                // Create the carousel again...    
            });
        } else if ( $(window).width() <= 1470 ) {
            $(".dev7-caroufredsel-carousel").carouFredSel({
                // Create the carousel again...    
            });
        }
    });
}

在轮播的onCreate事件中，我将window resize事件绑定到浏览器窗口超过给定限制时重新创建轮播。这是有效的，我不认为它会成为一个问题，但是......

这似乎是一件坏事，而不是正确的方式，我想知道如何正确地做到这一点？