4

I'm using Slider Syncing from Slick.js and need to control with only one navigator the other two. 

<div class="main">
  <div>content</div>
  <div>content</div>
</div>
<div class="navigator">
  <div>nav1</div>
  <div>nav2</div>
</div>
<div class="secondary">
  <div>content related with main1</div>
  <div>content related with main2</div>
</div>

And this is my js code for that

var slickMainFrame = {
    slidesToShow: 1,
    slidesToScroll: 1,       
    arrows: true,
    fade: true,
    asNavFor: '.navigator',
};

var slickNav = {
    dots: false,
    slidesToShow: 2,
    slidesToScroll: 1,       
    arrows: true,
    fade: true,
    asNavFor: '.main',
    speed: 500,
};

$('.main').slick(slickMainFrame);
$('.secondary').slick(slickMainFrame);
$('.navigator').slick(slickNav);

This is not working at all.. I've tried using the asNavFor attribute of slickNav as an array or colon separated but it's not working neither. asNavFor: '.main, .secondary'

VMAtm
  • 27,943
  • 17
  • 79
  • 125
Julioarhernandez
  • 167
  • 2
  • 11

1 Answers1

10

Try this:

HTML

<div class="main asnavForClass">
  <div>content</div>
  <div>content</div>
</div>
<div class="navigator">
  <div>nav1</div>
  <div>nav2</div>
</div>
<div class="secondary asnavForClass">
  <div>content related with main1</div>
  <div>content related with main2</div>
</div>

Javascript

 var slickMainFrame = {
   slidesToShow: 1,
   slidesToScroll: 1,       
   arrows: true,
   fade: true,
 };
 var slickNav = {
   dots: false,
   slidesToShow: 2,
   slidesToScroll: 1,       
   arrows: true,
   fade: true,
   asNavFor: '.asnavForClass',
   speed: 500,

};



$('.main').slick(slickMainFrame);
$('.secondary').slick(slickMainFrame);
$('.navigator').slick(slickNav);

Check the JSFiddle for a working example

Baro
  • 5,300
  • 2
  • 17
  • 39
  • @Julioarhernandez It was a pleasure :) – Baro Jan 11 '16 at 20:45
  • Awesome!!! asNavFor was the key... but there is a little problem.. I'd like to use the main navigation buttons to control also the nav and the secondary... that's why I needed the cross-reference with asNavFor.. – Julioarhernandez Jan 11 '16 at 21:01
  • 2
    @Julioarhernandez Sorry, is not clear... you want all control each other ? like this ? https://jsfiddle.net/um7gmzrn/2/ – Baro Jan 11 '16 at 21:06
  • @Julioarhernandez well :) – Baro Jan 11 '16 at 21:41