Slick Slider - пользовательские стрелки - уберите скрытое пятно и снова включите функциональность

Question

У меня есть скользящий слайдер, который ограничен 4 слайдами, и у меня есть этот набор, так что они всегда видны в сетке.Я использую focusOnSelect, чтобы один из слайдов был активным, и вы можете щелкнуть остальные 3, чтобы сделать его активным.

Этот слайдер затем синхронизируется с другой панелью, где текст отображается на каждом слайде.С этой настройкой все работает нормально.

Однако мне также нужны стрелки (или пользовательский текст в этом случае) как nav (предыдущий / следующий), чтобы также циклически перемещаться по слайдам, но так как 4 слайда отображаются наНа экране - всего из 4 слайдов - стрелки по умолчанию имеют класс «скользко-скрытый», и даже если я заставлю их отображать с помощью CSS, они по-прежнему лишены функциональности и ничего не делают.

Есть ли способ заставить их быть видимыми и сохранить следующую / предыдущую функциональность?Это просто из-за того, что класс или какие-то другие функции мешают им работать?

Вот мои настройки:

$('.slick-whoweare').slick({
    arrows: true,
    dots: false,
    centerMode: true,
    autoplay: false,
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    speed: 500,
    variableWidth: false,
    focusOnSelect: true,
    nextArrow: '.wwanext',
    prevArrow: '.wwaprev',
    asNavFor: '.slider-wwanav'
  });

В исходном коде его вывод выглядит так (стрелки распознаются,просто отключен):

<div class="wwa-nav">
    <div class="wwaprev slick-arrow slick-hidden" tabindex="-1" aria-disabled="false">Previous</div>
    <div class="wwanext slick-arrow slick-hidden" tabindex="-1" aria-disabled="false">Next</div>
</div>

После исследования я также нашел другой подход установки «стрелок: ложь», затем используя мой собственный код, но это тоже не работает:

$('.wwaprev').click(function(){
   $('.slick-whoweare').slick('slickPrev');
})

$('.wwanext').click(function(){
   $('.slick-whoweare').slick('slickNext');
})

Любая помощь / руководство будет приветствоваться.

Answer 1

Мне удалось решить это самостоятельно.

Я добавил стрелки на второй синхронизированный ползунок, а не на основной:

$('.slider-nav').slick({
    arrows: true,
    dots: false,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    fade: true,
    swipe: true,
    asNavFor: '.slick-whoweare',
    nextArrow: '.wwanext',
    prevArrow: '.wwaprev'
  });

, тогда настройки для основного ползунка так же, какстандарт:

$('.slick-whoweare').slick({
    arrows: true,
    dots: false,
    centerMode: true,
    centerPadding: 0,
    autoplay: false,
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    speed: 500,
    variableWidth: false,
    focusOnSelect: true,
    asNavFor: '.slider-nav'
});

Однако это приводит к путанице в главном слайдере, поскольку теперь он ведет себя с анимацией преобразования (скользящей вправо, когда больше нет слайдов) - он не обходился без этих новых настроек.Поскольку я хочу, чтобы они были зафиксированы в сетке, я просто добавил немного CSS, чтобы предотвратить это в списке сликов и заставить его не двигаться:

.slick-whoweare .slick-track, .slick-whowearer .slick-list {
  -webkit-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

И это сработало.Теперь есть пользовательские стрелки, работающие с двумя синхронизированными ползунками.