Carousels slick.js : 'getSlick' of undefined

Question

i'm using Slick.js to make 2 caroussels connected, and they are syncronised. Slick offers the possibility, at the section "Slider Syncing" slick.js website

But when i'm using it, it doesnt work, i'm getting an error: Uncaught TypeError: Cannot read property 'getSlick' of undefined

my code is :

$('#page-gravure .sliders .slides-show ul').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slides'
});

$('#page-gravure .sliders .slides ul').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slides-show',
  centerMode: true,
  focusOnSelect: true
});

Please guys, can you help me ?

EDIT: JSFIDDLE Example

Apostles

Are you able to provide a minimum working example by using something like jsfiddle? =] – Unite

there's one on their website kenwheeler.github.io/slick in the middle of the home page at the section "Slider Syncing" :) – Apostles

A minimum working example of YOUR code, which causes the problem. Because then you make validating a solution to the problem as easy as possible. – Unite

hoo okey, i'll do that and add it. – Apostles

the Jsfiddle is added to my question post. – Apostles

Answer 1

The problem is that both of your references for the synced slider asNavFor: ... are wrong. The reference should be the same as you do to construct each slide. So your constructor functions should be as follows:

$('#page-gravure .sliders .slides-show ul').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '#page-gravure .sliders .slides ul'
});

$('#page-gravure .sliders .slides ul').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '#page-gravure .sliders .slides-show ul',
  centerMode: true,
  focusOnSelect: true
});

Here's a working JSFiddle

Cheers

Royroyal