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>
n4m31ess_c0d3r :
It is because there is a condition to show the arrows and it is \n\n if( _.slideCount > _.options.slidesToShow )\n\n\nwhere,\n\nslideCount - total no of slides or <div> elements in this case\n\nslidesToShow - property passed in the slick settings/options\n\nSo, 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.\n\nHence to show the arrows either add some more divs or decrease the value of slidesToShow\n\n$('.slider-nav').slick({\n slidesToShow: 2, /* reduce this number */\n slideToScroll: 1,\n asNavFor: '.slider-for',\n dots: true,\n centerMode: true,\n focusOnSelect: true\n});\n\n\nHere's a JSfiddle",
2016-11-09T16:46:39
vickzzzzz :
I would have commented this if I could already comment. 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'. \n\nAs for the solution would suggest you to add \n\narrows: false,\n\n\nto the $('.slider-nav').slick function call",
2016-11-09T16:11:05