Slick.js неправильное поведение стрелок, как его решить?

Question

Я использую slick.js для создания карусели на моем сайте. Он должен содержать 4 элемента в «не-бесконечной» прокрутки, то JS я использую:

$(document).ready(function(){ 

    $('.caroselloslick').slick({ 
     lazyLoad: 'ondemand', 
     infinite: false, 
     slidesToShow: 4, 
     slidesToScroll: 1 
    }); 

}); 

Thre карусельного работает до последнего элемента, здесь пятно карусельного стрелка становится серой, чтобы показать, что я не могу прокручивать больше. Во всяком случае, если я нажму на серую стрелку, например, 3 раза число зарегистрировано плагином каким-то образом ... Поэтому, если я хочу прокрутить назад с помощью противоположной стрелки, я должен нажать 3 раза до начала прокрутки ... Как я могу сделать, чтобы заблокировать это поведение?

Answer 1

Похоже, что слабые события срабатывают, несмотря на состояние, которое, как представляется, было отключено. Вы можете запросить это, используя console.log печатает диагностическое сообщение в afterChange события:

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) { 
    console.log('fired'); 
}); 

Если вы явно установить атрибут на кнопки со стрелками disabled, это событие не срабатывает на клик, тем самым гарантируя, что пятно счетчик не обновляется, в отличие от фактического состояния пятна содержимого.

Используя приведенную выше информацию, вы можете ввести вспомогательный метод, чтобы установить атрибут disabled кнопок со стрелками в зависимости от значения aria-disabled:

function checkArrowState($arrow) { 
    if ($arrow.attr('aria-disabled') == 'true') { 
    $arrow.attr('disabled', 'disabled'); 
    } else { 
    $arrow.removeAttr('disabled'); 
    } 
} 

В afterChange случае, вы можете вызвать выше метод, как так:

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) { 
    checkArrowState($('.slick-arrow:eq(0)')); //Previous arrow 
    checkArrowState($('.slick-arrow:eq(1)')); //Next arrow 
}); 

Вышеупомянутое может быть дополнительно улучшено путем проверки того, какая кнопка со стрелкой инициировала изменение, которое я вам предоставит.

Пожалуйста, смотрите демо ниже для рабочего примера:

Fiddle Demo