3

我有这个轮播作为一个 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 的大小，并且图像会正确缩小，但会发生这种情况： 在此处输入图像描述 图像“未居中”。在创建轮播时发生的某些过程不会（自然地）触发。我现在解决这个问题的方法是：（我知道 javascript 不是 DRY，这只是一个例子）

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轮播的情况下，当浏览器窗口超过给定限制时，我将 resize 事件绑定window到重新创建轮播。这行得通，我认为这不会成为问题，但是...

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

4

0 回答 0