'Swiper Slider...removing the arrows

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

I tried to do this with jQuery, but what I have isn't working.

<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 have one image across the screen. I then replaced the last part with the following code and it too changed it to one image across the screen 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 me even more confused.

Solution 1:^[1]

I managed to get this working using another way though. I just wanted to show the navigation arrows when they were not 'disabled'.

On Swiper API we have disabledClass, which is the class to be applied when the arrows are disabled (no navigation to be done, i.e. beginning or end of the slider).

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

and then on the css side just simply:

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

Solution 2:^[2]

My first thought would be to

console.log(slides);

And check and see what number it has at the the time its run.

Also fix console error:

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

Looks like this element is not being found:

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

Solution 3:^[3]

I was searching for the answer too hence dropped here. My requirement was to hide the arrows if the website was on mobile so I used the following code to make it working ->

CSS ->

.swiper-button-next,
.swiper-button-prev{
    visibility: hidden;
  }

HTML ->

<div class="swiper-button-next" ></div>
<div class="swiper-button-prev" ></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Vitor Antonio
Solution 2	alexjbrown2
Solution 3	Tushar Sethi

'Swiper Slider...removing the arrows

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]