我可以给其他按钮提供与 Slick Carousel 点相同的功能吗答案

【问题标题】：Can I give other buttons the same function as the Slick Carousel dots我可以给其他按钮提供与 Slick Carousel 点相同的功能吗
【发布时间】：2020-08-29 11:51:39
【问题描述】：

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

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

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

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

提前发送。

【问题讨论】：

不太清楚这意味着什么：UI 的原生导航按钮

标签： javascript jquery sass carousel slick.js

【解决方案1】：

你可以使用slickGoTo方法。

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

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

slickElem.sickGoTo(slideNumber);

例如：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

或

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

请参阅：http://kenwheeler.github.io/slick/（向下滚动到方法）

【讨论】：