用光滑的滑块控制 Jquery Range 滑块

Question

我有一个 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>

Answer 1

要在单击 Slick Carousel 的 next 和 prev 按钮时更新 jQuery UI Slider，请挂钩到 carousel 的 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>

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