slickGoTo 行导致 Uncaught TypeError答案

【问题标题】：The slickGoTo line is causing an Uncaught TypeErrorslickGoTo 行导致 Uncaught TypeError
【发布时间】：2019-07-14 05:14:15
【问题描述】：

我无法通过添加下面的 slickGoTo 行来随机化 slick carousel (http://kenwheeler.github.io/slick/) 的第一张幻灯片。

我收到以下 Chrome 控制台错误：

Uncaught TypeError: $(...).slick(...).slickGoTo is not a function  
  at HTMLDocument.<anonymous> (script-new.js:18)  
  at i (jquery.min.js:2)  
  at Object.fireWith [as resolveWith] (jquery.min.js:2)  
  at Function.ready (jquery.min.js:2)  
  at HTMLDocument.K (jquery.min.js:2)

我正在运行以下 javascript 代码：

// get the number of slides
var total = $('.slide').length;

// random number
var rand = Math.floor( Math.random() * total );

$(document).ready(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 7000,
    arrows:true,
    fade: true,
    slide:".slide",
    pauseOnHover:false,
    adaptiveHeight: true,
    dots: true
  })
  .slickGoTo(rand); // navigate to random slide
});

我正在使用 jQuery 版本 1.12.1 和 Slick 版本 1.6。我想在页面加载时随机显示一张幻灯片，但幻灯片顺序保持不变。

【问题讨论】：

标签： javascript jquery slick.js typeerror

【解决方案1】：

如documentation中所述，

在 1.4 版本中通过 slick 方法本身在 slick 实例上调用方法

意思是你必须使用slick(，方法名作为参数传递如下：

$('.slide').slick().slick('slickGoTo', Math.floor((Math.random() * 3) + 1));

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	
<div class="slide">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
</div>

【讨论】：

这肯定是我见过的最糟糕的文档。不过，+1 是一个可行的解决方案。