breakpoint attibute

[jdaury]

Hi, i'm trying to set the breakpoint option but it's not working:

`<swiper slides-per-view="2" breakpoints="{ 640: { 'slidesPerView': '1' } }"

... `

I'm getting this error:

angular.min.js:118 TypeError: Cannot use 'in' operator to search for 'max' in { '640': { 'slidesPerView': '1' } }

thanks

[luketroberts]

We're having the same issue @jdaury did you find a solution for this?

cheers

[marcio199226]

Hi guys i had the same issue you must update swiper manually and set breakpoints manually.

function updateCarouselSlides(swipers) {
    angular.forEach(swipers, function (swiper) {
        $timeout(function () {
            if (vm[swiper]) {
                if ($window.innerWidth < 767) vm[swiper].params.slidesPerView = 1;
                if ($window.innerWidth >= 768 && $window.innerWidth <= 991) vm[swiper].params.slidesPerView = 2;
                if ($window.innerWidth >= 992) vm[swiper].params.slidesPerView = 3;
                //after any changes slide to first film
                if (swiper === 'swiperMain' || swiper === 'swiperSecondary') {
                    vm[swiper].slideTo(0);
                }
                vm[swiper].update(true);
            }
        }, 250);
    });
}

[luketroberts]

Thanks @marcio199226 I ended submitting a PR above which fixed it for us.

[nebulr]

Upgraded with 2.3.7 npm packge

[Akravish]

Can you upgrade it for bower, please?

[YUTCPE07]

Hi guys i had the same issue you must update swiper manually and set breakpoints manually.

function updateCarouselSlides(swipers) {
    angular.forEach(swipers, function (swiper) {
        $timeout(function () {
            if (vm[swiper]) {
                if ($window.innerWidth < 767) vm[swiper].params.slidesPerView = 1;
                if ($window.innerWidth >= 768 && $window.innerWidth <= 991) vm[swiper].params.slidesPerView = 2;
                if ($window.innerWidth >= 992) vm[swiper].params.slidesPerView = 3;
                //after any changes slide to first film
                if (swiper === 'swiperMain' || swiper === 'swiperSecondary') {
                    vm[swiper].slideTo(0);
                }
                vm[swiper].update(true);
            }
        }, 250);
    });
}

add to swiper.js or add to my controller. if add to my controller and how to use this function.

[marcio199226]

Hi guys i had the same issue you must update swiper manually and set breakpoints manually.

function updateCarouselSlides(swipers) {
    angular.forEach(swipers, function (swiper) {
        $timeout(function () {
            if (vm[swiper]) {
                if ($window.innerWidth < 767) vm[swiper].params.slidesPerView = 1;
                if ($window.innerWidth >= 768 && $window.innerWidth <= 991) vm[swiper].params.slidesPerView = 2;
                if ($window.innerWidth >= 992) vm[swiper].params.slidesPerView = 3;
                //after any changes slide to first film
                if (swiper === 'swiperMain' || swiper === 'swiperSecondary') {
                    vm[swiper].slideTo(0);
                }
                vm[swiper].update(true);
            }
        }, 250);
    });
}

add to swiper.js or add to my controller. if add to my controller and how to use this function.

You should call this or similar function each time you have updated your data so your swiper instance will be updated accordingly.

In my case there are differents swipers on the same page so you should refactor it for handle one swiper at a time if you need