幻灯片数量不同时，受控Swiper滑块无限滚动实现方案

当控制器滑块（任意数量，无需循环）控制受控滑块（少量幻灯片，需无限循环）时，直接为受控滑块设置loop: true会因Swiper原生控制器的索引绑定逻辑，导致幻灯片出现跳变问题。以下是解决方法：

核心思路 #

放弃Swiper原生的自动控制器绑定，改为手动监听控制器的滑动事件，通过取模运算计算受控滑块的目标索引，再调用Swiper的循环滑动方法实现平滑的无限滚动，避免索引不匹配导致的跳变。

修改后的完整代码 #

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.1.0/swiper-bundle.css" integrity="sha512-6HEJkWR1zijwiB3XwQE9eHjDBJmA/Fcl88LlxMba1EC1kakrlXOA14rJmQujhDkTQ6/TSXmGo0w57GbnZ2FSdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="slider-container">
  <div class="swiper-slider myslider">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-color: plum;">Slide 1</div>
      <div class="swiper-slide" style="background-color: orange;">Slide 2</div>
    </div>
  </div>
  <div class="swiper-slider controller">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-color: aqua">Controller 1</div>
      <div class="swiper-slide" style="background-color: aquamarine;">Controller 2</div>
      <div class="swiper-slide" style="background-color: greenyellow;">Controller 3</div>
      <div class="swiper-slide" style="background-color: gold;">Controller 4</div>
      <div class="swiper-slide" style="background-color: navajowhite;">Controller 5</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.1.0/swiper-bundle.min.js" integrity="sha512-sR63/L3Slqn0OWMMafv7gmRGxkYJOcfgdN3jznwea9NYiett6R+cGdZ0t0TRHeH1gZogMyLE1oQpQ0Lc6ULKbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CSS #

.slider-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: fantasy;
  text-align: center;
  font-size: 60px;
  font-weight: 600;
  color: antiquewhite;
  text-transform: uppercase;
  text-shadow: 0px 0px 15px #afafaf;
  letter-spacing: 5px;
  gap: 45px;
}

.slider-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.myslider {
  width: 300px;
  height: 300px;
}

.myslider .swiper-slide {
  border-radius: 40px;
}

.controller {
  color: #bd67f4;
  letter-spacing: 3px;
  font-size: 22px;
  width: 230px;
  height: 80px;
  overflow: hidden;
}

JavaScript #

// 初始化受控滑块（需无限循环）
const slider = new Swiper('.myslider', {
  loop: true,
  createElements: true,
  effect: 'flip',
  slidesPerView: 1,
  allowTouchMove: false,
  observer: true,
  mousewheel: true,
  observeParents: true,
  on: {
    slideChange: function() {
      console.log('受控滑块真实索引:', slider.realIndex);
    },
  },
});

// 初始化控制器滑块（无需循环）
const control = new Swiper('.controller', {
  slidesPerView: 1,
  grabCursor: true,
  touchEventsTarget: '.slider-container',
  allowTouchMove: true,
  observer: true,
  mousewheel: true,
  observeParents: true,
  on: {
    // 手动监听控制器滑动事件，同步受控滑块
    slideChange: function() {
      // 获取控制器当前真实索引
      const controlIndex = control.realIndex;
      // 受控滑块的真实幻灯片数量（排除loop生成的虚拟幻灯片）
      const sliderSlideCount = slider.slides.length / 3; // loop模式下幻灯片是真实数量的3倍
      // 计算目标索引：用控制器索引对受控滑块数量取模，实现循环
      const targetIndex = controlIndex % sliderSlideCount;
      // 调用slideToLoop方法滚动到目标位置，自动处理循环逻辑
      slider.slideToLoop(targetIndex);
    }
  }
});

// 移除原生控制器绑定，改用手动同步
// control.controller.control = slider;

关键逻辑说明 #

1. 索引计算：通过control.realIndex获取控制器的真实索引，避免虚拟索引干扰；用取模运算controlIndex % sliderSlideCount让受控滑块的索引在自身幻灯片数量范围内循环。
2. 循环滑动方法：使用slider.slideToLoop(targetIndex)而非slideTo，该方法专门适配loop模式，会自动识别循环中的虚拟幻灯片，实现平滑的无限滚动，不会出现跳变。
3. 移除原生绑定：注释掉control.controller.control = slider，避免原生索引绑定的冲突。

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