BxSlider设置moveSlides为2时奇数幻灯片滑动异常求助

我来帮你搞定这个BxSlider的滑动问题～你现在遇到的情况是因为幻灯片总数为奇数时，最后一组只剩1个，默认逻辑就只会滑动1个。要实现始终每次滑动2个幻灯片，有两种比较实用的方案，我结合你的代码给你详细说明：

方案一：添加空白占位幻灯片（简单直观） #

这种方法是让幻灯片总数变成偶数，这样每次滑动2个就不会有剩余。你只需要在<ul class="masterSlider">里添加一个和其他幻灯片样式一致的空白li就行：

修改后的HTML部分：

<div class="mainDiv"> 
  <ul class="masterSlider"> 
    <li data-slide="1">1 </li> 
    <li data-slide="2">2</li> 
    <li data-slide="3">3 </li> 
    <li data-slide="4">4</li> 
    <li data-slide="5">5</li> 
    <li data-slide="6"></li> <!-- 新增空白占位幻灯片 -->
  </ul> 
</div>

CSS不用做任何修改，你的.masterSlider li已经统一设置了样式，空白li会自动继承。这样总数变成6个，每次滑动2个就完全匹配了，最后一组是第5和第6个（空白），视觉上也不会有违和感。

方案二：修改滑动逻辑，实现循环滑动（无需占位） #

如果你不想添加占位幻灯片，可以修改gotoSlide函数的索引计算逻辑，同时开启BxSlider的无限循环，让滑动到最后一组时自动循环到前面的幻灯片：

首先修改BxSlider的配置，添加infiniteLoop: true：

masterSlider = $('.masterSlider').bxSlider({
  mode: 'horizontal',
  captions: false,
  pager: false,
  minSlides:2,
  maxSlides: 2,
  moveSlides:2,
  slideWidth: 100,
  slideMargin: 10,
  infiniteLoop: true // 开启无限循环
});

然后修改gotoSlide函数，让点击后的跳转始终按2个的步长计算，处理奇数的情况：

function gotoSlide() {
  var currentSlide = parseInt($(this).data('slide')) - 1; // 转换成0-based索引
  var slideCount = masterSlider.getSlideCount();
  // 计算目标索引：始终按2个一组跳转
  var targetIdx = Math.floor(currentSlide / 2) * 2;
  // 如果是最后一个奇数幻灯片，跳转到起始位置（循环显示前两个）
  if (currentSlide === slideCount - 1 && slideCount % 2 !== 0) {
    targetIdx = 0;
  }
  masterSlider.goToSlide(targetIdx);
}

这样修改后，当你点击第5个幻灯片（最后一个奇数），会自动跳转到第0个索引（也就是第1、2个幻灯片），实现每次滑动2个的效果，同时保持无限循环的流畅性。

两种方案都能解决你遇到的问题，你可以根据自己的需求选择～

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