CODEWITHSUNDEEP
jquery
user1937021
user1937021

Reputation: 10801

Change Dangerous swiper settings on resize - reload slider

I have the following "responsive" slider made with Dangerous swiper, On mobile under 653px it shows 1 slide at a time, and on desktop above 653px it shows as many that can fit in: IF you load the page at each screen size it seems to work fine, however when you resize (the browser) it sometimes gets a bit messed up. i.e. slides drop down, or the slides width changes when you resize back up again

At the moment I have the following code for the resize part:

$(window).resize(function() {   
        var browserWidthResize = $(window).width(); // New width
                 if (browserWidthResize < 653) {
                        mySwiper.params.slidesPerView=1

                 } else { 
                      mySwiper.params.slidesPerView='auto'
                 }
        });

This changes the slidesperview parameter on resize.

However I'm guessing that it might be best to reload the slider altogether with the new settings on resize, or could be there be a better way to tackle this?

You can see it in action here:

http://machinas.com/wip/hugoboss/responsive-template/v1/

thanks.

Upvotes: 0

Views: 14294

Answers (1)

Олег Слинявук
Олег Слинявук

Reputation: 101

Read about breakpoints (swiper API)

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetweenSlides: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetweenSlides: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetweenSlides: 30
    }
  }
})

Upvotes: 10

Related Questions