Swiper Slider – removing the arrows

Question

I would like to remove arrows on iDangerous Swiper Slider unless the arrows are needed. For example, I currently have 4 images side by side. If a user is on a mobile device (or a smaller computer screen), and less than 4 images show up, then I want the arrows to show up so that the user can scroll. However, if all 4 of the images show up, then I don't want the arrows to appear.

I tried to do this with jQuery, but the following code doesn't work:

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

That didn't work. In fact, it messed up the slider (instead of having 4 separate images, I had one image across the screen. Then I replaced the last part with the following code, and it changed it to one image across the screen again, and the arrows were still there.

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

Here's a link to the website Here's a JS Fiddle link. Strangely enough, the code that works on my website doesn't work on JS Fiddle, which has confused me even more.

Answer 1

Can you please check it out i have created a snippet for you and i will explain i have created a function that check the view port as its defined in swiper breakpoints when the viewport less than 1024 which is 3 slides then the arrow will appear once is greater than 1024 then the arrow will disappear as long as its 4 slides as you wanted.

Fiddle 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>