Swiper Slider ... снятие стрелок

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();
    }

Вот ссылка на сайт Вот ссылка JS Fiddle. Как ни странно, код, который работает на моем веб-сайте, не работает на JS Fiddle, что еще больше запутывает меня.

Answer 1

Можете ли вы проверить это, я создал фрагмент для вас, и я объясню, что я создал функцию, которая проверяет порт просмотра, как он определен в точках останова swiper, когда область просмотра меньше 1024 , что 3 слайда , тогда стрелка появится один раз, когда больше 1024 , тогда стрелка исчезнет, ​​если 4 слайда , как вы хотели.

Скрипка https://jsfiddle.net/61LLnfh7/6/

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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

Answer 2

Моей первой мыслью было бы

console.log(slides);

И проверьте и посмотрите, какой номер у него на момент запуска.

Также исправьте ошибку консоли:

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

Похоже, этот элемент не найден:

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