bamboopanda bamboopanda - 1 month ago 23
Javascript Question

slick carousel arrows for slider-nav

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>

Answer

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