Question

我希望根据视口大小更改bxslider的参数。但是，如果用户调整浏览器大小（或者旋转他们的移动设备），我希望这可以工作。到目前为止，我在下面的代码中运行了相关的功能。但是，这没有检测到重新大小？我怎么检测到这个？另外，我有一定的方式运行我使用的函数（只有当页面上存在元素等时，所以评论之间是我需要我的代码的地方。）

    clientsSlider: function () {
        if ($('.clients').length ) {


            //  

            if($(window).width() >= 1024){
                $('.bxslider').bxSlider({
                  minSlides: 4,
                  maxSlides: 4,
                  slideWidth: 170,
                  slideMargin:100,
                  responsive: true
                });  
            }

            if($(window).width() <= 1024){
                $('.bxslider').bxSlider({
                  minSlides: 2,
                  maxSlides: 2,
                  slideWidth: 170,
                  slideMargin:50,
                  responsive: true
                });  
            }

            //                                      
        }   
    }

Answer 1

您可以使用jQuery的resize方法来检测窗口的大小调整：

$( window ).resize(function() {
    if($(window).width() >= 1024){
        $('.bxslider').bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 170,
          slideMargin:100,
          responsive: true
        });  
    } else {
        $('.bxslider').bxSlider({
          minSlides: 2,
          maxSlides: 2,
          slideWidth: 170,
          slideMargin:50,
          responsive: true
        });  
    }
});

顺便说一句，你不应该在if语句中使用＆gt; =和＆lt; = 1024，因为如果宽度为1024px，两者都会执行。我上面代码中的else就足够了

检测窗口调整大小以运行不同的属性

1 个答案: