slick carousel стрелки для slider-nav

Question

Здравствуйте, я пытаюсь использовать функцию синхронизации слайдера для Slick, но не могу понять, как появляются предыдущие/следующие стрелки в секции слайдера на карусели. Я последовал шаги для включения в JS и CSS файлы и копировал JavaScript в пределах, например слайдер SYNCING:

$('.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 
}); 

Для моего HTML я следующее:

<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> 

Чтобы уточнить, когда я осмотрю слайдер синхронизируется примером на Slick сайта, я вижу сформированную разметку кнопок, но не для моей гладкой карусели:

<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 1

Это потому, что не является условием, чтобы показать стрелки и это

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

где

slideCount - общее количество слайдов или <div> элементов в этом случае

slidesToShow - недвижимость пройденный в пунктах настроек/опций

Итак, в вашем случае slideCount - это 3 (общее количество слайдов/дочерних дивизий внутри div slider-nav) и slidesToShow составляет 3, что не соответствует вышеуказанному условию.

Следовательно, чтобы показать стрелки или добавить еще немного divs или уменьшить значение slidesToShow

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

Вот JSfiddle

Answer 2

я бы прокомментировал это, если я мог бы уже Comme нт. Мне кажется, что вы неправильно поняли приведенный пример. Вы явно пробуете пример из «Slider Syncing», и там, как вы можете заметить, на «слайдер-навигаторе» есть стрелки, но на «слайдер-для» нет ни одного.

Что касается решения предложил бы добавить

arrows: false, 

в вызове функции $('.slider-nav').slick

Answer 3

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

Не используйте стрелки ложные, она удаляет ползунок стрелки.