@svm2001

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

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

В функции вызове слика прописано infinite: false

<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>


JS вот так написал:
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');
            }
        });
}
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
pLavrenov
@pLavrenov
Разработка сайтов
У слик слайдера есть документация в которой описаны события по клику на следущий/предыдущий слайд. Колбэк получает номер слайда, там же и делаешь что надо.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы