Как скрыть кнопки слайдера и некоторые элементы на странице при переходе на определенный слайд?

Question

[svm2001]

Надо скрывать элементы с классом "slick-next" и "slick-prev" после того, как я долистаю до 4го слайда. То есть, на 1,2 и 3 слайде кнопки нужны, а на 4 и 5 - их быть не должно.

<div class="slider">
    <button class="slick-next"></button>
    <div class="slider__item">content</div>
    <div class="slider__item">content</div>
    <div class="slider__item">content</div>
    <div class="slider__item">content</div>
    <div class="slider__item">content</div>
    <button class="slick-prev"></button>
</div>

var $slider = $('.slider');
        $slider.slick({
            infinite: false,
            swipe: false,
            nextArrow: '<div class="slick-next slick-arrow">next</div>',
            prevArrow: '<div class="slick-prev slick-arrow">prev</div>'
        });

        const Next = document.querySelector('.slick-next');

        $(Next).on('click', function() {

            const arrNext = document.querySelector('.slick-next');
            const arrPrev = document.querySelector('.slick-prev');

            if ('[data-slick-index]' === "3" || '[data-slick-index]' === "4") {
                arrNext.classList.add('slick-disabled');
                arrPrev.classList.add('slick-disabled');
            }
        });
}

Answer 1

[pLavrenov]

У слик слайдера есть документация в которой описаны события по клику на следущий/предыдущий слайд. Колбэк получает номер слайда, там же и делаешь что надо.

Comments

[svm2001]

я номер слайда не понимаю как получить. чтобы потом проверять

[pLavrenov]

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

?

[svm2001]

Спасибо большое, живи сто лет) я разобрался и все сделал. Ты мне очень помог.