主页 / 问题 / 872259
Accepted
stiv
Asked:2020-08-23 09:41:12 +0000 UTC2020-08-23 09:41:12 +0000 UTC

带滑块的光滑滑块

  • 772

告诉我如何实现滑块与图片同步的解决方案。显然，但以防万一：向右转动滑块 - 滑块向右移动。向左滑动 - 向左滑动

下面的链接是我的尝试：

https://codepen.io/st-iv/pen/NLqwqb?editors=1010

用过 nouislider，想用光滑的滑块同步它

var connectSlider = document.getElementById('rangeSlider');

noUiSlider.create(connectSlider, {
    start: 40,
    connect: [true, false],
    range: {
      'min': 0,
      'max': 100
    }
});

但是有一个带有进度条的解决方案，也许那里的某些部分会有所帮助 https://codepen.io/st-iv/pen/JBmvWO?editors=1010

javascript

1 个回答

  1. Best Answer

    标准解决方案input type=range。你可以随心所欲地设计它（IE10+）。

    $('#slider').on('init reInit',function(event,slick){
  var amount = slick.slideCount;
  $('#range').attr('max',amount);
})

$('#slider').on('afterChange',function(e,slick,currentSlide){
  $('#range').val(currentSlide+1);
})

$('#range').on('input change',function(){
  $('#slider').slick('slickGoTo',this.value-1);
});

$('#slider').slick({
  slidesToShow:2,
  arrows:false,
  dots:false
})
    *{
  box-sizing:border-box;
}

.slide{
  height:100px;
  line-height:100px;
  border:1px solid;
  text-align:center;
  font-size:60px;
  margin:0 5px;
}
.slick-list{
  margin:0 -5px;
}
.slick-current{
  color:red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<div id="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>
<input type="range" id="range" min="1" value="1" step="1" />

    • 5

相关问题