title: Media Queries in JavaScript - How to add Breakpoints and change "slidesPerView" in "Swiper" Slideshow
body: <p>I'm using the this script:</p>
  
  <pre><code>    var swiper = new Swiper('.swiper', {
      slidesPerView: 3,
      spaceBetween: 50,
  });
  </code></pre>
  
  <p>I would like the "slidesPerView: 3" to change to "slidesPerView: 2" when the screen width gets smaller then 1000px, and to "slidesPerView: 1" when screen width gets smaller then 500px.</p>
  
  <p>As I know nothing of javascript syntax, please help me out by writing the full code.</p>
  
  <p>Thanks you for your help.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Thank you all for your replies.</p>
  
  <p>I still can't get it to work though...</p>
  
  <p>Bellow is the complete script.</p>
  
  <p>What am I doing wrong???</p>
  
  <pre><code>var swiper2 = new Swiper('.swiper2', {
      slidesPerView: 3,
      spaceBetween: 50,
      freeMode: true,
      loop: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      breakpoints: {
          // when window width is &lt;= 499px
          499: {
              slidesPerView: 1,
              spaceBetweenSlides: 30
          },
          // when window width is &lt;= 999px
          999: {
              slidesPerView: 2,
              spaceBetweenSlides: 40
          }
      }
  });
  </code></pre>