Как скрыть элементы навигации Swiper.js

Question

Как скрыть элементы навигации Swiper.js

Рейтинг: 0Ответов: 3Опубликовано: 14.03.2023

Итак, в чём суть. Библиотека Swiper сама убирает навигацию когда все элементы помещаются на экран и прокрутка не требуется. Но, мне нужно реализовать так, чтобы даже если они не помещаются, но, например, карусель стоит в начале (на первом элементе) - не показывать левую кнопку навигации (Кнопка "Назад" или "Предыдущий"). Аналогично: скрыть кнопку "Вперёд" или "Следующий" когда докрутил карусель до конца.

Код инициализации Swiper:

  var swiper = new Swiper(".productMainSlider.vertuo > .woocommerce", {
    touch: false,
    direction: 'horizontal',
    slidesPerView: "auto",
    spaceBetween: 10,
    IOSEdgeSwipeDetection: true,
     onTouchStart: function()
    {
       return false;
    },
    scrollbarDraggable: true,
    scrollbarHide: true,
    grabCursor: true,
    freeMode: true,
    allowTouchMove: true,
    wrapperClass: 'products',
    slideClass: 'custom-theme-view',
    navigation: {
      nextEl: ".productMainSlider.vertuo .swiper-button-next",
      prevEl: ".productMainSlider.vertuo .swiper-button-prev",
      lockClass: '.swiper-lock-step-navs'
    },
    scrollbar: {
    el: ".productMainSlider.vertuo .swiper-scrollbar",
    dragSize: '175',
    },
    watchOverflow: true,
    draggable: true,
    breakpoints: {
      1024: {
        slidesPerView: 4,
        slidesPerGroup: 4,
      }

    },
  });

Что я попробовал из рекомендованого документацией:

lockClass: '.swiper-lock-step-navs'

и указал в

.swiper-lock-step-navs {display:none;}

Так же я попробовал

watchOverflow: true

Может кто-то сталкивался, с такой задачей. Буду признателен намёком куда копать. Заранее всем спасибо!

css javascript swiper.js navigation

Источник: Stack Overflow на русском

Answer 1

▲ 0

Решение было найдено на основе событий Swiper, а именно: reachEnd, reachBeginning и fromEdge.

swiper.on('reachEnd', function() {
    var swjsNext = document.querySelector('.productMainSlider.vertuo .swiper-button-next');
    swjsNext.style.display = 'none'; 
});

swiper.on('reachBeginning', function() {
    var swjsPrev = document.querySelector('.productMainSlider.vertuo .swiper-button-prev');
    swjsPrev.style.display = 'none'; 
});

swiper.on('fromEdge', function() {
    var swjsNext = document.querySelector('.productMainSlider.vertuo .swiper-button-next');
    swjsNext.style.display = 'flex';
    var swjsPrev = document.querySelector('.productMainSlider.vertuo .swiper-button-prev');
    swjsPrev.style.display = 'flex';    
});

Answer 2

▲ 0

Если я правильно понял вопрос, если слайдер находится в начале нужно скрыть кнопку назад, а если мы дошли до конца, то нужно скрыть кнопку вперёд. В таком случае, чтобы скрыть кнопку, swiper даёт кнопке назад класс swiper-button-disabled. То же самое будет, если мы пролистаем все слайды - кнопка вперёд тоже получит данный класс. Далее мы можем этому классу в стилях прописать какой-нибудь эффект или вовсе спрятать.

.swiper-button-disabled { display: none; };

Answer 3

▲ 0

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    display: none;
}

Как скрыть элементы навигации Swiper.js

Ответы