Question

我正在尝试更改在不同窗口宽度显示的幻灯片数量，在初始负载上拉动正确数量的幻灯片。但是在调整大小时滑块选项中的最小/最大幻灯片似乎没有变化，即使我的控制台日志显示了要更新的数字。

我的代码是

        var minSlides;
        var maxSlides;
        function windowWidth() {
            if ($(window).width() < 420) {
                minSlides = 1;
                maxSlides = 1;
            }
            else if ($(window).width() < 768) {
                minSlides = 2;
                maxSlides = 2;
            }
            else if ($(window).width() < 1200) {
                minSlides = 3;
                maxSlides = 3;
            }
            else {
                minSlides = 4;
                maxSlides = 4;
            }
        }

        windowWidth();
        var slider = $('.m-partners-slider').bxSlider({
            pager: false,
            controls: false,
            auto: true,
            slideWidth: 5000,
            startSlide: 0,
            nextText: ' ',
            prevText: ' ',
            adaptiveHeight: true,
            moveSlides: 1,
            slideMargin: 20,

            minSlides: minSlides,
            maxSlides: maxSlides,
        });

        $('.slider-prev').click(function () {
            var current = slider.getCurrentSlide();
            slider.goToPrevSlide(current) - 1;
        });
        $('.slider-next').click(function () {
            var current = slider.getCurrentSlide();
            slider.goToNextSlide(current) + 1;
        });

        $(window).on("orientationchange resize", function () {
            windowWidth();
            slider.reloadSlider();
            console.log("minSlides:" + minSlides);
            console.log("maxSlides:" + maxSlides);
        })

非常感谢任何帮助。

Answer 1

调用reloadSlider()将重新使用您在初始化期间指定的相同配置。要更改minSlides和maxSlides值，您需要将新配置对象传递给reloadSlider()函数。这样的事情应该有效：

// Use the conventional $ prefix for variables that hold jQuery objects.
var $slider;

// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration() {
  // When possible, you should cache calls to jQuery functions to improve performance.
  var windowWidth = $(window).width();
  var numberOfVisibleSlides;

  if (windowWidth < 420) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 768) {
    numberOfVisibleSlides = 2;
  }
  else if (windowWidth < 1200) {
    numberOfVisibleSlides = 3;
  }
  else {
    numberOfVisibleSlides = 4;
  }

  return {
    pager: false,
    controls: false,
    auto: true,
    slideWidth: 5000,
    startSlide: 0,
    nextText: ' ',
    prevText: ' ',
    adaptiveHeight: true,
    moveSlides: 1,
    slideMargin: 20,
    minSlides: numberOfVisibleSlides,
    maxSlides: numberOfVisibleSlides
  };
}

// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider() {
  var config = buildSliderConfiguration();

  if ($slider && $slider.reloadSlider) {
    // If the slider has already been initialized, reload it.
    $slider.reloadSlider(config);
  }
  else {
    // Otherwise, initialize the slider.
    $slider = $('.m-partners-slider').bxSlider(config);
  }
}

$('.slider-prev').click(function () {
  var current = $slider.getCurrentSlide();
  $slider.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
  var current = $slider.getCurrentSlide();
  $slider.goToNextSlide(current) + 1;
});

// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider);
// Configure the slider once on page load.
configureSlider();

BX Slider - 响应 - 最小/最大幻灯片

1 个答案: