Slick Slider - удалите стрелки с разных слайдов

Question

Я использую slick.js для включения слайдера. Я хочу удалить «предыдущую» стрелку, когда первый слайд активен, и стрелку «next», когда последний слайд активен. Возможно, мне придется удалить обе стрелки, когда последний слайд активен. Есть ли функция slick event или функция jquery, которая может это сделать?

Answer 1

Чтобы отключить предыдущую стрелку на первом слайде и следующей стрелке на последнем слайде, вы можете определить infinite : false, на гладкой инициализации, как показано ниже.

$("#slider").slick({ 
     infinite : false 
    }); 

Если у вас есть дополнительные настройки, просто включите это при инициализации. slider - идентификатор контейнера.

Это отключает стрелки на слайдере. Чтобы удалить стрелки, вы можете просто скрыть его, когда активен первый/последний слайд. Пройдите документацию о том, как получить активный слайд на слайдере и с помощью jquery hide вы можете скрыть стрелку по имени класса кнопки со стрелкой. Вы можете получить класс/идентификатор кнопки со стрелкой, проверив элемент. Щелкните правой кнопкой мыши на стрелке и проверьте ее.

Чтобы получить текущий слайд: $('#slider').slick('slickCurrentSlide');

Чтобы скрыть или показать рядом со стрелкой: $('.slick-next').show(); или $('.slick-next').hide();

Аналогично для предыдущая стрелка: $('.slick-prev').show(); или $('.slick-prev').hide();

Heres скрипку:https://jsfiddle.net/pjfw1wqz/

Answer 2

 // slick init 
     startSlick(); 
     var tickerDiv = $("#animatedHeading"); 
     function startSlick(slick) { 
      tickerDiv.slick({ 
       arrows: true, 
       infinite: false, 
       adaptiveHeight: true 
       }); 
       var current_article = tickerDiv.slick('slickCurrentSlide'); 
       var total_articles = tickerDiv.slideCount; 
       tickerDiv.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){ 
        current_article = tickerDiv.slick('slickCurrentSlide'); 
        total_articles = slick.slideCount; 
        slickArrow(); 
       }); 
       slickArrow(); 
       function slickArrow() { 
        if(current_article==0){ 
         $('.slick-prev').hide(); 
        }else{ 
         $('.slick-prev').show(); 
        } 
        if (current_article==total_articles-3){ 
         $('.slick-next').hide(); 
        }else{ 
         $('.slick-next').show(); 
        } 
       } 
     };