javascript - 如何在浏览器调整大小时重新加载 Javascript？ BX slider 轮播

Question

我正在使用 BXslider 轮播，并希望根据屏幕宽度在轮播中显示特定数量的静态幻灯片。

我尝试使用 jQuery resize()，但它无法正常工作。您可以在此处查看工作演示:pepnest.com/hbs

在这里，当您调整浏览器大小时，它会降低幻灯片的高度。

这是我在 JS 文件中的代码:

$(document).ready(function(){

    var width = $(window).width();

    if (width < 368) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 200,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 700) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 980) {
        $('.bxslider').bxSlider({
          minSlides: 2,
          maxSlides: 2,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 1200) {
        $('.bxslider').bxSlider({
          minSlides: 3,
          maxSlides: 3,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else {
        $('.bxslider').bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    }
 $(window).resize(function(){
    var width = $(window).width();

    if (width < 368) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 200,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 700) {
        $('.bxslider').bxSlider({
          minSlides: 1,
          maxSlides: 1,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 980) {
        $('.bxslider').bxSlider({
          minSlides: 2,
          maxSlides: 2,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else if (width < 1200) {
        $('.bxslider').bxSlider({
          minSlides: 3,
          maxSlides: 3,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    } else {
        $('.bxslider').bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 280,
          slideMargin: 20,
          captions: true
        });
    }
 });

});

任何人都可以帮我解决我出错的地方吗？

Answer 1

很遗憾，这不是办法。想象一下，您的浏览器在您调整大小的移动的每个像素处初始化一个新的 slider 。

您必须先销毁 bxSlider，然后才能初始化新的 bxSlider!

slider.destroySlider();

http://bxslider.com/options

除此之外，您实际上不必在每次调整大小操作时都触发该事件。请首先检查是否需要“重绘”(例如，不需要将大小从 1020 像素调整到 1080 像素)

例如使用 jQuery:

http://jsfiddle.net/r91ec9n6/3/

var resolutionLimits = [0, 368, 700, 980, 1200];
var currentResolutionLimit = null;

var resizeHandler = function()
{
    var foundResolution = 0;
    var windowSize = $(window.document).width();
    for(var i = 0; i < resolutionLimits.length; i++)
        foundResolution = windowSize > resolutionLimits[i] ? i : foundResolution;

    if(foundResolution !== currentResolutionLimit){
        currentResolutionLimit = foundResolution
        var currentResolution = resolutionLimits[currentResolutionLimit];

        // This is only called when the resolution is changed beyond a limit AND at document load
        $(window.document.body).empty().append('Resolution changed, currently > ' + currentResolution);

    }

}

$(window).resize(resizeHandler).resize();