拖动Slick JS并更改内容

Question

我使用光滑的js创建滑块和内容。 这是我的代码： HTML

<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3 class="none">2</h3></div>
    <div><h3 class="none">3</h3></div>
  </div>
  <div class="content">this is first content</div>
  <div class="other">this is second content</div>
</div>

和我的JS

$(".slick-dots").click(function(){
  if(!$(".slick-slide.slick-current").children().hasClass("none")){
    $(".content").show();
    $(".other").hide();
  } else {
    $(".content").hide();
    $(".other").show();
}
var isDragging = false;
$(".slick-slide")
.mousedown(function() {
  isDragging = false;
})
.mousemove(function() {
  isDragging = true;
})
.mouseup(function() {
  var wasDragging = isDragging;
  isDragging = false;
  if (wasDragging || !wasDragging) {
    $(".other").show();
  }
})
;

我希望使用光滑的点中的单击按钮之类的拖动滑动功能。 这是我的完整代码：https://jsfiddle.net/dedi_wibisono17/e5bxsz3o/11/ 有人帮忙吗？谢谢