使用光滑的滑块控制 Jquery 范围滑块

如何解决使用光滑的滑块控制 Jquery 范围滑块

我有一个 codepen 演示，其中通过拖动范围滑块来移动光滑的滑块，但我想在用户单击下一个前一个按钮和滑块本身时移动它。目前，只能通过拖动范围滑块来移动。任何帮助将不胜感激。

Demo link of slick slider with jquery slider

$(function() {
  var $carousel = $(".carousel");
  var slider;
  
  $carousel.slick({
    speed : 300,height: 200,arrows: true,slidesToShow: 2,prevArrow: '<div class="slick-prev"><</div>',nextArrow: '<div class="slick-next">></div>'
  });
  
  slider = $( ".slider" ).slider({
    min : 0,max : 5,slide: function(event,ui) {
      var slick = $carousel.slick( "getSlick" );
      goTo = ui.value * (slick.slideCount-1) / 5;
     // console.log( goTo );
      $carousel.slick( "goTo",goTo );
    }
  });
});

.slider {
  width: 400px;
  background: black;
}
.slider .ui-slider-handle {
  display: block;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  background: red;
  cursor: pointer;
  position: relative;
}
.carousel {
  width: 400px;
  height: 200px;
  margin-left:50px;
  margin-top:50px
}
.carousel .slick-slide {
  height: 200px;
}
.carousel span {
  width: 400px;
  height: 200px;
  background:blue;
  font-size:30px
}

.slick-prev,.slick-next{
  background:green;
  width:40px;
  float:left;
  height:20px;
  position:absolute;
  left:-50px;
  top:50%
}

.slick-next{
  left:auto;
  right:-50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.js"></script>
<div class="carousel">
  <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  <span>5</span>
</div>
<div class="slider"></div>

解决方法

要在单击 Slick Carousel 的下一个和上一个按钮时更新 jQuery UI Slider，请挂钩到轮播的 afterChange 事件。此属性采用一个函数，该函数接受当前幻灯片的索引作为第三个参数。您可以将此索引用作滑块的值以对其进行更新。

另请注意，滑块的范围应仅从 0 到 4，因为有 5 个幻灯片。试试这个：

$(function() {
  var $carousel = $(".carousel");
  var $slider;

  $carousel.slick({
    speed: 300,height: 200,arrows: true,slidesToShow: 2,prevArrow: '<div class="slick-prev"><</div>',nextArrow: '<div class="slick-next">></div>',}).on('afterChange',(e,slick,slide) => {
    $slider.slider('value',slide);
  });

  $slider = $(".slider").slider({
    min: 0,max: 4,slide: function(event,ui) {
      var slick = $carousel.slick("getSlick");
      goTo = ui.value * (slick.slideCount - 1) / 4;
      $carousel.slick("goTo",goTo);
    }
  });
});

.slider {
  width: 400px;
  background: black;
}

.slider .ui-slider-handle {
  display: block;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  background: red;
  cursor: pointer;
  position: relative;
}

.carousel {
  width: 400px;
  height: 60px;
  margin-left: 50px;
  margin-top: 50px
}

.carousel .slick-slide {
  height: 50px;
}

.carousel span {
  width: 400px;
  height: 200px;
  background: blue;
  font-size: 30px
}

.slick-prev,.slick-next {
  background: green;
  width: 40px;
  float: left;
  height: 20px;
  position: absolute;
  left: -50px;
  top: 50%
}

.slick-next {
  left: auto;
  right: -50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.js"></script>
<div class="carousel">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>
<div class="slider"></div>

请注意，我只是在演示中调整了轮播的大小，以使内容更适合代码段。您无需修改​​生产版本中的 CSS。