时间戳

首页 > 解决方案 > Splidejs 或 jQuery / JS 以及使用范围滑块更改幻灯片

javascript - 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>

标签： javascripthtmljquerysliderrangeslider

解决方案

我不确定您发布的代码，所以我自己制作了。在 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">

推荐阅读