如何在窗口尺寸为767px及以下时停止bxslider自动轮播？

嘿，这个需求很好实现，咱们只需要结合窗口resize事件监听和bxSlider自带的API方法就能搞定。先看一下你的初始化代码，然后一步步修改：

首先，你的slider初始化代码是这样的：

var slider = $('.bxslider-wrapper').bxSlider({ 
  autoHover: true, 
  tickerHover: true, 
  controls: false, 
  pause: options.auto != '' ? options.auto : 4000, 
  pager: options.showControls ? options.showControls : false, 
  auto: options.auto != '' ? true : false, 
  infiniteLoop: options.continuous ? options.continuous : false, 
  touchEnabled: isTouchableDevice() 
});

接下来，我们要做两件事：

1. 页面加载完成时，先判断一次窗口宽度，设置正确的轮播状态
2. 监听窗口大小变化，实时切换自动轮播的启停

完整修改后的代码 #

var slider = $('.bxslider-wrapper').bxSlider({ 
  autoHover: true, 
  tickerHover: true, 
  controls: false, 
  pause: options.auto != '' ? options.auto : 4000, 
  pager: options.showControls ? options.showControls : false, 
  auto: options.auto != '' ? true : false, 
  infiniteLoop: options.continuous ? options.continuous : false, 
  touchEnabled: isTouchableDevice() 
});

// 定义控制自动轮播的核心函数
function toggleSliderAuto() {
  const windowWidth = $(window).width();
  // 当窗口宽度≤767px时停止轮播，否则根据初始配置恢复
  if (windowWidth <= 767) {
    slider.stopAuto();
  } else {
    // 只有当初始配置了auto为true时才重启，避免无效操作
    if (options.auto != '') {
      slider.startAuto();
    }
  }
}

// 防抖函数：避免窗口拖动时频繁触发函数，提升性能
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 页面加载时先执行一次，确保初始状态正确
toggleSliderAuto();

// 用防抖后的函数监听resize事件，避免频繁触发
$(window).on('resize', debounce(toggleSliderAuto));

关键说明 #

• bxSlider提供了stopAuto()和startAuto()两个API，用来手动控制自动轮播的启停，这是实现需求的核心
• 加入防抖函数是为了优化体验：窗口resize事件会在拖动过程中频繁触发，防抖能让函数只在窗口大小稳定后执行，减少不必要的操作
• 我们特意判断了options.auto != ''的条件，确保只有当初始配置是开启自动轮播时，大屏幕下才会重启轮播，符合你的原有逻辑

这样就能完美实现：当窗口尺寸≤767px时自动停止轮播，窗口放大后（如果初始是开启状态）恢复自动轮播，页面加载时也会根据当前窗口宽度设置正确状态。

内容的提问来源于stack exchange，提问作者sizemattic