CODEWITHSUNDEEP
javascriptjqueryslick.jstypeerror
E. Espana
E. Espana

Reputation: 33

The slickGoTo line is causing an Uncaught TypeError

I'm unable to randomize the first slide of a slick carousel (http://kenwheeler.github.io/slick/) by adding the slickGoTo line below.

I get the following Chrome console error:

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)

I'm running the following javascript code:

// 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
});

I'm using jQuery version 1.12.1 and Slick version 1.6. I want to show a random slide when the page loads but the slide sequence to remain the same.

Upvotes: 0

Views: 3648

Answers (1)

Serge K.
Serge K.

Reputation: 5323

As stated in the documentation,

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

Meaning you have to use slick( with the method name passed as parameter as follow :

$('.slide').slick().slick('slickGoTo', Math.floor((Math.random() * 3) + 1));
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.min.js"></script>
	
<div class="slide">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
</div>

Upvotes: 2

Related Questions