Можно ли у swiper js убрать навигацию если слайдов меньше 5?

Question

Можно ли у 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';
               }
    }

Answer 1

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

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

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

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

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

БЛОГ НА HUSL

Можно ли у swiper js убрать навигацию если слайдов меньше 5?

Ответы (1 шт):