JQuery 根据 window 大小重新加载三个设置变量

Question

我正在尝试根据 window 的大小为 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。

您需要监听 window 的调整大小事件，当它触发时，重新计算所需的幻灯片数量，如果它发生变化，则使用它的 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 
            });
        }
    });

});

我还添加了一些小优化，这样浏览器就不会在每次 window 调整大小时重建整个滑块组件（通过拖动边缘调整 window 大小时每秒触发几次），但仅在实际幻灯片数量发生变化的那一刻。

希望对您有所帮助。

Answer 2

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

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

/* 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 根据 window 大小重新加载三个设置变量

JQuery reload three settings variables based on window size

javascript

jquery

bxslider