slickGoTo 行导致 Uncaught TypeError

Question

我无法通过在下面添加 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。我想在页面加载时显示一张随机幻灯片，但幻灯片顺序保持不变。

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>

slickGoTo 行导致 Uncaught TypeError

The slickGoTo line is causing an Uncaught TypeError

javascript

jquery

typeerror

slick.js