Hello I am trying to use the slider syncing option for Slick, but can't figure out how the prev/next arrows are showing up in the slider-nav section of the carousel. I followed the steps for including the js and css files and copied the javascript within the slider syncing example:

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slideToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

For my HTML I have the following:

<div class="slider-for">
  <div>
      test 1
  </div>
  <div>
      test 2
  </div>
  <div>
      test 3
  </div>
</div>
<div class="slider-nav">
  <div>
    <img src="images/carousel-thumbnails/thumbnail-1.jpg" alt=""/>
  </div>
  <div>
    <img src="images/carousel-thumbnails/thumbnail-2.jpg" alt=""/>
  </div>
  <div>
    <img src="images/carousel-thumbnails/thumbnail-3.jpg" alt=""/>
  </div>
</div>

To clarify, when I inspect the slider syncing example on the Slick website, I see the generated markup for the buttons, but not for my own slick carousel:

<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>

<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>

Hello I am trying to use the slider syncing option for Slick, but can't figure out how the prev/next arrows are showing up in the slider-nav section of the carousel. I followed the steps for including the js and css files and copied the javascript within the slider syncing example:

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slideToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

For my HTML I have the following:

<div class="slider-for">
  <div>
      test 1
  </div>
  <div>
      test 2
  </div>
  <div>
      test 3
  </div>
</div>
<div class="slider-nav">
  <div>
    <img src="images/carousel-thumbnails/thumbnail-1.jpg" alt=""/>
  </div>
  <div>
    <img src="images/carousel-thumbnails/thumbnail-2.jpg" alt=""/>
  </div>
  <div>
    <img src="images/carousel-thumbnails/thumbnail-3.jpg" alt=""/>
  </div>
</div>

To clarify, when I inspect the slider syncing example on the Slick website, I see the generated markup for the buttons, but not for my own slick carousel:

<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>

<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>

• javascript
• jquery
• slick.js

3 Answers 3

It is because there is a condition to show the arrows and it is

 if( _.slideCount > _.options.slidesToShow )

where,

slideCount - total no of slides or <div> elements in this case

slidesToShow - property passed in the slick settings/options

So, in your case slideCount is 3 (total slides/ child divs inside the div slider-nav ) and slidesToShow is 3, which doesn't meet the above condition.

Hence to show the arrows either add some more divs or decrease the value of slidesToShow

$('.slider-nav').slick({
  slidesToShow: 2, /* reduce this number */
  slideToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Here's a JSfiddle

I would have mented this if I could already ment. Seems to me that you misunderstood the example given. You are clearly trying out the example from "Slider Syncing" and there as you can notice, there are arrows on 'slider-nav' but none on 'slider-for'.

As for the solution would suggest you to add

arrows: false,

to the $('.slider-nav').slick function call

 $('.slider-for').slick({
  ..  
   arrows: false, // use true or remove it
  ..
});

Don't use arrow false, it removes slider arrows.