title: Swiper Slider...removing the arrows
body: <p>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.</p>
  
  <p>I tried to do this with jQuery, but what I have isn't working.</p>
  
  <pre><code>&lt;script&gt;
  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([
      '&lt;div class="swiper-slide"&gt;Slide ' + (--prependNumber) + '&lt;/div&gt;',
      '&lt;div class="swiper-slide"&gt;Slide ' + (--prependNumber) + '&lt;/div&gt;'
      ]);
  });
  document.querySelector('.prepend-slide').addEventListener('click', function (e) {
    e.preventDefault();
    swiper.prependSlide('&lt;div class="swiper-slide"&gt;Slide ' + (--prependNumber) + '&lt;/div&gt;');
  });
  document.querySelector('.append-slide').addEventListener('click', function (e) {
    e.preventDefault();
    swiper.appendSlide('&lt;div class="swiper-slide"&gt;Slide ' + (++appendNumber) + '&lt;/div&gt;');
  });
  document.querySelector('.append-2-slides').addEventListener('click', function (e) {
    e.preventDefault();
    swiper.appendSlide([
      '&lt;div class="swiper-slide"&gt;Slide ' + (++appendNumber) + '&lt;/div&gt;',
      '&lt;div class="swiper-slide"&gt;Slide ' + (++appendNumber) + '&lt;/div&gt;'
      ]);
  });
  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 &lt; 4) {
  arrowPrev.style.display = 'none';
  arrowNext.style.display = 'none';
   }
   &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>  var swiper__slidecount = mySwiper.slides.length;
      if (swiper__slidecount &gt; 3) {
        $('.swiper-button-prev,.swiper-button-next').remove();
      }
  </code></pre>
  
  <p>Here's a <a href="http://arrant.org/" rel="nofollow noreferrer">link to the website</a>
  Here's a <a href="https://jsfiddle.net/deadendstreet/ja7m8t7z/2/#&amp;togetherjs=FP27ymSs4Q" rel="nofollow noreferrer">JS Fiddle link.</a> Strangely enough, the code that works on my website, doesn't work on JS Fiddle, which has me even more confused.</p>