Media Queries in JavaScript - How to add Breakpoints and change "slidesPerView" in "Swiper" Slideshow

Question

I'm using the this script:

    var swiper = new Swiper('.swiper', {
    slidesPerView: 3,
    spaceBetween: 50,
});

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.

As I know nothing of javascript syntax, please help me out by writing the full code.

Thanks you for your help.

EDIT:

Thank you all for your replies.

I still can't get it to work though...

Bellow is the complete script.

What am I doing wrong???

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 <= 499px
        499: {
            slidesPerView: 1,
            spaceBetweenSlides: 30
        },
        // when window width is <= 999px
        999: {
            slidesPerView: 2,
            spaceBetweenSlides: 40
        }
    }
});

Answer 1

As stated by A Wolff, check the documentation first and use the breakpoints method, something like:

var swiper = new Swiper('.swiper', {
    // Default parameters
    slidesPerView: 3,
    spaceBetween: 50,
    // Responsive breakpoints
    breakpoints: {
        // when window width is <= 499px
        499: {
            slidesPerView: 1,
            spaceBetweenSlides: 50
        },
        // when window width is <= 999px
        999: {
            slidesPerView: 2,
            spaceBetweenSlides: 50
        }
    }
});

Since it's a less than or equal to equation, just take off a pixel so once it's under 500px (aka 499px), readjust and same for 1000.

I left the spaceBetweenSlides in there for you to mess with, but if you want to just keep it at 50, feel free to remove them from the breakpoints.

Swiper API Docs

EDIT

After reviewing the site, there are a few things that need to be changed:

• You need to call the Swiper JS file in the head of the document, instead of inline with both slideshows (only need to call it once, put it below the jQuery script tag)
• Can't have the same class name on both slides because it will then attach the first set of rules to both sliders
• Make sure the document is ready before manipulating the DOM, removing the script tags from by the sliders and put this in the head

Here's how I would set up the Swipers:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Add this part below the jQuery script call -->
<script src="js/slideshow-swiper.min.js"></script>
<script>
    // Once the DOM has loaded, attach the Swiper(s)
    $(function(){
        var swiper_banner = new Swiper('#slideshow_banner', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true
        });
        var swiper_services = new Swiper('#slideshow_services', {
            slidesPerView: 3,
            spaceBetween: 50,
            freeMode: true,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            breakpoints: {
                // when window width is <= 499px
                499: {
                    slidesPerView: 1,
                    spaceBetweenSlides: 30
                },
                // when window width is <= 999px
                999: {
                    slidesPerView: 2,
                    spaceBetweenSlides: 40
                }
            }
        });
    });
</script>
<!-- Continue loading fonts, etc -->

Don't add the jQuery file in there twice, just putting it there for a reference point. Also both containers have the same ID and that's not valid HTML, so change the ID's and attach the Swipers that way. So now your containers would be something like:

<div class="swiper-container" id="slideshow_banner"><!-- Code --></div>
...
<div class="swiper-container" id="slideshow_services"><!-- Code --></div>

Once you update that, it should fix itself, however I can't test it live on your site so let me know once you've updated the code and I'll take a look.

EDIT 1.1

It seems the breakpoints method is a real 'breakpoint' in the function as it has a weird way of handling the Object that is passed and therefore gives varied results across browsers, so with the use of the onResize() method and some JS, let's fix that:

<script>
    // Once the DOM has loaded, attach the Swiper(s)
    $(function(){
        var swiper_banner = new Swiper('#slideshow_banner', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true
        });
        var swiper_services = new Swiper('#slideshow_services', {
            slidesPerView: 3,
            spaceBetween: 50,
            freeMode: true,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        });
        // Breakpoints
        $(window).on('resize', function(){
            var width = $(window).width();
            if(width < 1000 && width >= 500) {
                swiper_services.params.slidesPerView = 2;
                swiper_services.params.spaceBetween = 40;
            } else if(width < 500) {
                swiper_services.params.slidesPerView = 1;
                swiper_services.params.spaceBetween = 30;
            } else {
                swiper_services.params.slidesPerView = 3;
                swiper_services.params.spaceBetween = 50;
            }
            swiper_services.onResize();
        }).resize();    
    });
</script>

There, that should do it. I tested that on Chrome, FF, and IE9+ and it was running fine.