Media Queries in JavaScript - How to add Breakpoints and change "slidesPerView" in "Swiper" Slideshow
<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>