Carousels slick.js: 'getSlick' of undefined

Question

I use Slick.js to connect 2 carousels and they are synchronized. Sleek offers an opportunity to " slider Synchronization " website slick.js

But when I use it, it doesn’t work, I get the error message: Uncaught TypeError: cannot read getSlick property from 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

Answer 1

, asNavFor: ... . , . - :

$('#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
});

JSFiddle