Splidejs 或 jQuery / JS 并使用范围滑块更改幻灯片

问题描述

我用带有缩略图和箭头的 SplideJS 制作了滑块，工作简单，点击箭头更改幻灯片，滑动缩略图更改幻灯片，就这么简单。

我的问题是，我想插入 8 个步骤的范围滑块，当您移动范围滑块时缩略图会移动，但是当拇指处于自动循环范围滑块时不会移动。

不幸的是，SplideJS 不支持范围滑块，所以我想使用 jQuery（如下），但我完全不知道如何完成它。

HTML + SplideJS：

https://splidejs.com/thumbnail-slider/

<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

https://jqueryui.com/slider/#default

<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>
<script>
  $( function() {
    var select = $( "#toRangeSlider" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,max: 8,range: "min",value: select[ 0 ].selectedindex + 1,slide: function( event,ui ) {
        select[ 0 ].selectedindex = ui.value - 1;
      }
    });
    $( "#toRangeSlider" ).on( "change",function() {
      slider.slider( "value",this.selectedindex + 1 );
    });
  } );
</script>

解决方法

我不确定你发布的代码，所以我自己做了。在 document.load 上，它动态地将范围滑块设置为 max 的幻灯片计数。侦听器是 input 而不是 change，因为您希望立即获得结果，并且以编程方式切换幻灯片的 api 是 splider.go(+$(this).val())（+ 将字符串 val() 转换为数字）。我注意到 API 无法跟上滑块，因此我添加了一个小 setTimeout，让它有机会赶上。

$(document).ready(function() {
  let tmo; // track the timeouts
  $("#range-slider").attr('max',$('.splide__slide').length - 1);
  $("#range-slider").on("input",function() {
    clearTimeout(tmo);
    tmo = setTimeout(() => splider.go(+$(this).val()),100)
  });
  const splider = new Splide('.splide').mount();
});

.splide__slide {
  padding: 20px;
  text-align: center;
}

.slider {
  display: block;
  width: 80%;
  margin: 15px auto;
}

<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>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<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>
<input type="range" step="1" min="0" max="" value="0" class="slider" id="range-slider">