Question

除非需要箭头，否则我想删除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();
    }

这里是link to the website 这是一个JS Fiddle link.奇怪的是，在我的网站上运行的代码对JS Fiddle没有影响，让我更加困惑。

Answer 1

我的第一个想法是

console.log(slides);

检查并查看其运行时的号码。

同时修复控制台错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):449

看起来找不到这个元素：

document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {

Answer 2

请你检查一下我为你创建了一个片段，我将解释我创建了一个函数，当视口小于1024 时，检查视图端口是否在swiper断点中定义是 3张幻灯片然后箭头会出现一次大于1024 然后只要 4幻灯片，箭头就会消失。< / p>

小提琴https://jsfiddle.net/61LLnfh7/6/

ALTER TABLE table_1
  ADD CONSTRAINT fk_table_1 (col2 ) REFERENCES table_2( col4)
  INITIALLY DEFERRED DEFERRABLE;

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  slidesPerGroup: 4,
  loopedSlides: 4,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  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,
    }
  },
  on: {
    init: function() {
			checkArrow();
    },
    resize: function () {
			checkArrow();
    }
  }
});

function checkArrow() {
  var swiperPrev = document.querySelector('.swiper-button-prev');
  var swiperNext = document.querySelector('.swiper-button-next');
  if ( window.innerWidth < 1024  ) {
    console.log('Success', window.innerWidth);
    swiperPrev.style.display = 'block';
    swiperNext.style.display = 'block';
  } else {
    swiperPrev.style.display = 'none';
    swiperNext.style.display = 'none';
  }
}

.swiper-wrapper .swiper-slide {
  background-color: #eee;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

Answer 3

尽管如此，我还是设法用另一种方式使它工作。我只想显示未禁用的导航箭头。

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

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

然后在CSS方面就很简单：

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

Swiper Slider ...删除箭头

3 个答案: