javascript - Carousels slick.js : 'getSlick' of undefined - Stack Overflow

admin管理员组

文章数量:1289603

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

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

• javascript
• jquery
• slick.js

Share Improve this question Follow edited Nov 30, 2015 at 12:50 Jean-Claude Pratt-Delzenne asked Nov 30, 2015 at 11:13 Jean-Claude Pratt-DelzenneJean-Claude Pratt-Delzenne 45111 gold badge33 silver badges1212 bronze badges 5

• Are you able to provide a minimum working example by using something like jsfiddle? =] – Relequestual Commented Nov 30, 2015 at 11:16
• there's one on their website kenwheeler.github.io/slick in the middle of the home page at the section "Slider Syncing" :) – Jean-Claude Pratt-Delzenne Commented Nov 30, 2015 at 11:21
• 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. – Relequestual Commented Nov 30, 2015 at 11:22
• hoo okey, i'll do that and add it. – Jean-Claude Pratt-Delzenne Commented Nov 30, 2015 at 11:24
• 1 the Jsfiddle is added to my question post. – Jean-Claude Pratt-Delzenne Commented Nov 30, 2015 at 12:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptCarousels slickjs39getSlick39 of undefinedStack Overflow