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

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

jquery,slick.js,

3

Ответов: 3

6 ов принято

Чтобы отключить предыдущую стрелку на первом слайде и следующей стрелке на последнем слайде, вы можете определить на гладкой инициализации, как показано ниже. $("#slider").slick({ infinite : false });

slider

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

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

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

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

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

Heres Fiddle: https://jsfiddle.net/pjfw1wqz/

0 
        // 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();
                    }
                }
        };
0

О, мой бог! Slick добавляет специальный класс для таких стрелок - slick-disabled. Вам нужно отключить бесконечную функцию и добавить стиль для этого класса.

<script>
    $(document).ready(){
        $('#slider').slick({
            infinite : false, 
        });
    };
</script>
<style>
    .slick-arrow.slick-disabled { 
        display: none !important;
    }
</style>
JQuery, slick.js,
Похожие вопросы
Яндекс.Метрика