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

我很遗憾地说这不是道路。想象一下，您的浏览器会在您重新调整大小的每个移动像素上初始化一个新滑块。

你必须在初始化一个新的之前销毁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();

如何在浏览器调整大小时重新加载Javascript？ BXslider旋转木马

1 个答案: