如何实现SplideJS轮播与jQuery range滑块双向联动适配自动轮播

实现逻辑 #

• 存储Splide初始化实例，方便调用跳转、监听事件API
• 滑块滑动事件触发时，调用splide.go()方法跳转到对应下标幻灯片
• 监听Splide的move事件，轮播切换时同步更新滑块数值

完整代码示例 #

基础HTML结构 #

<!-- Splide轮播结构 -->
<div id="secondary-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list" id="toRangeSlider">
            <li class="splide__slide">1st slide</li>
            <li class="splide__slide">2nd slide</li>
            <li class="splide__slide">3rd slide</li>
            <li class="splide__slide">4th slide</li>
            <li class="splide__slide">5th slide</li>
            <li class="splide__slide">6th slide</li>
            <li class="splide__slide">7th slide</li>
            <li class="splide__slide">8th slide</li>
        </ul>   
    </div>
</div>

<!-- jQuery依赖 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Splide依赖，你原有引入内容保留即可 -->

JS逻辑代码 #

// 初始化Splide，原有缩略图、自动轮播、箭头等配置全部保留即可，此处仅为示例
const splide = new Splide('#secondary-slider', {
  perPage: 1,
  autoplay: true,
}).mount();

// 初始化滑块并绑定联动逻辑
$(function() {
  const totalSlides = splide.length;
  // 动态插入滑块容器
  const $slider = $("<div id='slider'></div>").insertAfter('#secondary-slider').slider({
    min: 0,
    max: totalSlides - 1,
    range: "min",
    value: 0,
    slide: function(event, ui) {
      // 拖动滑块时切换轮播
      splide.go(ui.value);
    }
  });

  // 轮播切换时同步滑块位置
  splide.on('move', (newIndex) => {
    $slider.slider('value', newIndex);
  });
});

注意事项 #

• 滑块的上下限直接和Splide的幻灯片下标对齐，不需要额外做数值转换，避免逻辑错误
• 所有触发轮播切换的操作（点击箭头、点击缩略图、自动轮播）都会自动同步滑块位置
• 如果你的Splide开启了循环模式，联动逻辑无需修改即可正常适配

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