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中所述，

通过版本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>

slickGoTo行导致未捕获的TypeError

1 个答案: