我可以为其他按钮提供与 Slick Carousel 圆点相同的功能吗

Question

我正在重新设计一个包含 Slick Carousel 的用户界面。它使用点和箭头进行导航。 Carousel 只有两张幻灯片。

我想做的是使用 UI 的本机导航按钮在幻灯片之间切换。但是，我无法找出这些点调用的实际功能或它所在的位置。

我知道可以选择重新设计和重新定位这些点，但对于已经存在的导航元素来说，这似乎是一个很大的开销。

这可能吗？如果可以，我该怎么做？

提前发送。

Answer 1

要移动到下一张幻灯片，请在您的按钮单击事件处理程序中添加：

$('.your-element').slick('moveNext');

或

$('.your-element').slick('movePrev');

参见：http://kenwheeler.github.io/slick/（向下滚动至方法）

Answer 2

Slick 有方法供您使用：

(function($){
  var slider = $('.slick').slick({
    arrows:true,
    dots:true
  });
  
  $('.next').on('click',function(){
    slider.slick('slickNext');
  });
  
  $('.prev').on('click',function(){
    slider.slick('slickPrev');
  });
  
  $('.first').on('click',function(){
    slider.slick('slickGoTo',0);
  });
  
  $('.last').on('click',function(){
    slider.slick('slickGoTo',4);
  });
  
})(jQuery);

.slick{
  width: 300px
}

<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="slick">
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
</div>

<button class="next">NEXT</button>
<button class="prev">PREV</button>

<button class="first">FIRST</button>
<button class="last">LAST</button>

Answer 3

您可以使用slickGoTo方法。

let slickElem = $("selector").slick();//Initialize

然后在点击导航元素时使用如下变量：

slickElem.sickGoTo(slideNumber);

例如：

$("firstNavigation").on("click",function(){ slickElem.sickGoTo(1);});

我可以为其他按钮提供与 Slick Carousel 圆点相同的功能吗

Can I give other buttons the same function as the Slick Carousel dots

javascript

jquery

sass

carousel

slick.js