0

Можно ли у swiper js убрать навигацию если слайдов меньше 5? Я пробовал скрыть по условию, но оно применятся ко всем слайдерам, даже к тем у кого слайдов больше 5. Есть ли вообще такая функция у swiper скрыть навигацию по количеству слайдов? Спасибо

if ($('.product__slider').length > 0) {
        var swiper = new Swiper('.product__thumbs', {
            spaceBetween: 0,
            slidesPerView: 5,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            spaceBetween: 5,
            //height: 90,
            navigation: {
                nextEl: '.product__arrow-next',
                prevEl: '.product__arrow-prev',
            },
            breakpoints: {
                480: {
                    slidesPerView: 5,
                },
                540: {
                    slidesPerView: 5,
                },
                640: {
                    slidesPerView: 5,
                },
                720: {
                    slidesPerView: 5,
                },
                768: {
                    slidesPerView: 5,
                },
                1024: {
                    slidesPerView: 5,
                    spaceBetween: 5,
                },
            }
        });
        var swiper2 = new Swiper('.swiper', {
            spaceBetween: 5,
            slidesPerView: 1,
            thumbs: {
                swiper: swiper,
            },
        });
               if($(".product__thumbs").length < 5){
                document.querySelector(".product__arrows").style = 'display: none';
               }
    }

1 ответ 1

2

Можно конечно, для начала нужно почитать документацию к Swiper.
И хоть иногда смотреть в девтул..

Swiper, когда элементы навигации недоступны, как в случае, когда слайдов меньше чем требуется для "свайпа", вешает на элементы управления lockClass, по дефолту у navigation этот класс - swiper-button-lock и вы можете его переназначить:

new Swiper('.swiper', {
  ...
  navigation: {
    nextEl: '...',
    prevEl: '...',
    lockClass: '*ЛЮБОЕ НАЗВАНИЕ КЛАССА*'
  }
})

А потом данному классу добавить в CSS:

*ЛЮБОЕ НАЗВАНИЕ КЛАССА* {
  display: none;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.