Question

我正在尝试根据窗口的大小为bxSlider加载三个设置变量。我希望在调整浏览器大小时动态加载新设置，而不仅仅是在加载时。我有下面的代码设置变量，我只是努力使它与mySlider的底部变量很好地匹配，这是调整大小时脚本的内容。

有人可以提供提示吗？

$(document).ready(function () {     
        /* Set variables for the maxSlides option */
        var slidenumber,
            width = $(window).width();

        if (width < 768) {
            slidenumber = 1;
        } else if (width < 1024) {
            slidenumber = 2;
        } else {
            slidenumber = 3;
        }

        $('.bxslider').bxSlider({
            slideWidth: 5000,
            minSlides: slidenumber,
            maxSlides: slidenumber,
            slideMargin: 50
        });

        var mySlider;

        function tourLandingScript() {
            mySlider.reloadSlider(slidenumber());
        }

        mySlider = $('.bxslider').bxSlider(slidenumber());
        $(window).resize(tourLandingScript);

});

Answer 1

实现这一目标的最佳方法是使用CSS和媒体查询，这样您就可以隐藏或缩小幻灯片而无需更改其编号。但是，如果您需要使用普通CSS无法实现更复杂的行为，那么您需要为其编写一些javascript。

您需要收听窗口的调整大小事件，当它触发时，重新计算所需数量的幻灯片，如果更改，请使用它的reloadSlider（）方法更新滑块。代码可能看起来像这样：

 $(document).ready(function () {     

    var slideCount;
    var mySlider;        

    // separate function to calculate required slide count
    function calculateSlides() {
        var width = $(window).width();
        var slidenumber;
        if (width < 768) {
            slidenumber = 1;
        } else if (width < 1024) {
            slidenumber = 2;
        } else {
            slidenumber = 3;
        }
        return slidenumber;
    }

    // when page loads, we initialize the slider
    slideCount = calculateSlides();
    mySlider = $('.bxslider').bxSlider({
        slideWidth: 5000,
        minSlides: slideCount,
        maxSlides: slideCount,
        slideMargin: 50
    });

    // when we resize the window, just recalculate number of slides
    // and if it has changed, reload the slider

    $(window).resize(function() {
        var newSlideCount = calculateSlides();
        if (newSlideCount != slideCount) {
            slideCount = newSlideCount;
            mySlider.reloadSlider({
                minSlides: newSlideCount,
                maxSlides: newSlideCount 
            });
        }
    });

});

我还添加了一些小优化，以便浏览器不会在每个窗口调整大小时重建整个滑块组件（通过拖动其边缘来调整窗口大小时每秒触发几次），但仅在实际数字的时刻幻灯片的变化。

希望这有帮助。

Answer 2

感谢Ondra Koupil的帮助，但是我无法让他的解决方案按照要求完全正常工作，我最终选择了一种全新的方法，我肯定可以拆开它以便优化并且不太可能是最有效的选择，但它对我有用，并且希望对其他人有用。

以下解决方案旨在成为两个完全独立的JS，如果组合在一个页面上将无法工作。目的是在相关页面上加载相关选项（设置一/二）。

/* Settings one */
$(document).ready(function () { 
    var settings = function() {
    var settings1 = { /* Desktop */
            minSlides: 3,
            maxSlides: 3,
            moveSlides: 1,
            slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */
            slideMargin: 50
        };
        var settings2 = { /* Mobile */
            minSlides: 1,
            maxSlides: 1,
            moveSlides: 1,
            slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */
        };
        return ($(window).width()<1200) ? settings2 : settings1;
    }

    var mySlider;

    function reloadonresize() {
        mySlider.reloadSlider(settings());
    }

    mySlider = $('.bxslider').bxSlider(settings());
    $(window).resize(reloadonresize);


});
/* End settings */

/* Settings two */
$(document).ready(function () { 
    var settings = function() {
    var settings1 = { /* Desktop */
            minSlides: 4,
            maxSlides: 5,
            moveSlides: 3,
            slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */
            slideMargin: 50
        };
        var settings2 = { /* Mobile */
            minSlides: 2,
            maxSlides: 2,
            moveSlides: 1,
            slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */
        };
        return ($(window).width()>=768) ? settings1 : settings2;
    }

    var mySlider;

    function reloadonresize() {
        mySlider.reloadSlider(settings());
    }

    mySlider = $('.bxslider').bxSlider(settings());
    $(window).resize(reloadonresize);


});
/* End settings */

JQuery根据窗口大小

2 个答案: