时间戳

首页 > 解决方案 > Swiper Slider...移除箭头

javascript - Swiper Slider...移除箭头

问题描述

除非需要箭头，否则我想删除 iDangerous Swiper Slider 上的箭头。例如，我目前并排有 4 张图像，如果用户在移动设备（或较小的计算机屏幕）上并且显示的图像少于 4 张，那么我希望显示箭头以便用户可以滚动。但是，如果所有 4 个图像都显示出来，那么我不希望箭头出现。

我试图用 jQuery 做到这一点，但我所拥有的不起作用。

<script>
var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                slidesPerGroup: 4,
                loopedSlides: 4,
                centeredSlides: false,
                spaceBetween: 0,
                grabCursor: true,
                loop:false,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                breakpoints: {
                    1200: {
                        slidesPerView: 4,
                        loopedSlides: 4,
                        spaceBetween: 10
                    },
                    1024: {
                        slidesPerView: 3,
                        loopedSlides: 3,
                        spaceBetween: 10
                    },
                    768: {
                        slidesPerView: 2,
                        loopedSlides: 2,
                        spaceBetween: 10
                    },
                    675: {
                        slidesPerView: 1,
                        loopedSlides: 1,
                        spaceBetween: 20
                    }
                }
            });
document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.prependSlide([
    '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
    '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
    ]);
});
document.querySelector('.prepend-slide').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
});
document.querySelector('.append-slide').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
});
document.querySelector('.append-2-slides').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.appendSlide([
    '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
    '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
    ]);
});
var slides = document.querySelectorAll('.swiper-wrapper .swiper-slide');
var arrowPrev = document.querySelector('.swiper-button-prev');
var arrowNext = document.querySelector('.swiper-button-prev');

if (slides.length < 4) {
arrowPrev.style.display = 'none';
arrowNext.style.display = 'none';
 }
 </script>

这没有用，事实上，它弄乱了滑块（而不是有 4 个单独的图像，我在屏幕上有一个图像。然后我用下面的代码替换了最后一部分，它也将它更改为一个图像。屏幕和箭头仍然存在。

  var swiper__slidecount = mySwiper.slides.length;
    if (swiper__slidecount > 3) {
      $('.swiper-button-prev,.swiper-button-next').remove();
    }

这是该网站的链接 这是一个JS Fiddle 链接。奇怪的是，在我的网站上运行的代码在 JS Fiddle 上不起作用，这让我更加困惑。

标签： javascriptjqueryswiper

解决方案

不过，我设法用另一种方式让它工作。我只是想在导航箭头未被“禁用”时显示它们。

在Swiper API上，我们有 disabledClass，这是在禁用箭头时应用的类（无需进行导航，即滑块的开始或结束）。

navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    disabledClass: 'disabled_swiper_button'
  },

然后在 css 方面只是简单地：

.disabled_swiper_button {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
}

推荐阅读