javascript - slickGoTo 行导致未捕获的类型错误

Question

我无法通过添加下面的 slickGoTo 行来随机化光滑轮播 ( 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。我想在页面加载时显示随机幻灯片，但幻灯片顺序保持不变。

Answer 1

如 documentation 中所述,

Methods are called on slick instances through the slick method itself in version 1.4

这意味着您必须使用 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>