Correct way to use breakpoints

Question

Correct way to use breakpoints

Opened this issue 9 years ago · 7 comments

I'm trying to add breakpoints into my slider. I want the slider to have 6 slides per view on desktop but only 2 slides on mobile. If I use the override parameters like this

<ks-swiper-container loop="false" pagination-is-active="false" pagination-clickable="false" show-nav-buttons="false" space-between="0" swiper="swiper" override-parameters="{'breakpoints':'640: {slidesPerView: 2, spaceBetweenSlides: 20 },1200: {slidesPerView: 6}'}">

Swiper.js throws an type error.

TypeError: Cannot use 'in' operator to search for 'max' in 640: {slidesPerView: 2, spaceBetweenSlides: 20 },1200: {slidesPerView: 6} at Object.b.setBreakpoint (swiper.js:300)

I'm guessing the error is a string is getting passed over and it should be an object. Is there a better way to try to accomplish this?

Answer 1 · 2016-04-13T09:39:09.000Z

Seems like this is not possible yet because the library is using an older version of swiper js which does not support responsive. https://github.com/nolimits4web/Swiper/blob/a896e93a4e491cef80b90686045fb11a518a8014/CHANGELOG.md#swiper-320---released-on-november-7-2015

Also make sure you validate the json you place inside override-parameters as it looks invalid.

Answer 2 · 2016-04-13T18:50:15.000Z

If you wanted to you could try to raise the swipers versions in angular-swiper dependency and perform a regression test. If all checks pass, you could probably PR it here.

Answer 3 · 2016-04-13T18:52:31.000Z

Probably starting with ~3.1.0 (which will allow 3.2.0 if you were to declare it in your bower.json you could declare in your app and select it as you run bower install).

Answer 4 · 2016-06-22T19:32:40.000Z

I already had the latest version of swiper loading. So what I did was just add breakpoints to the params variable in angular-swiper.js
slidesPerView: $scope.slidesPerView || 1, slidesPerColumn: $scope.slidesPerColumn || 1, spaceBetween: $scope.spaceBetween || 0, direction: $scope.direction || 'horizontal', loop: $scope.loop || false, initialSlide: $scope.initialSlide || 0, showNavButtons: false, breakpoints: $scope.breakpoints || {}

That was enough to get it to work the way I need it too.

Answer 5 · 2016-08-01T19:34:29.000Z

@Byucougars Can you send me last version angular-swiper.js because I didnt find, and can you add your html code and angular code ? thanks for help

Answer 6 · 2016-08-21T20:36:40.000Z

I am using 3.3.1 and added breakpoints: $scope.breakpoints || {} but its still not working.

Answer 7 · 2016-08-22T14:35:25.000Z

I'm using 3.3.0. my code isnt' that great. I was in a jam and have it in mind to go back and clean it up to be more helpful for other people. But the idea is this.

under scope I added breakpoints: '@'

scope: { onReady: '&', slidesPerView: '=', slidesPerColumn: '=', spaceBetween: '=', parallax: '=', parallaxTransition: '@', paginationIsActive: '=', paginationClickable: '=', showNavButtons: '=', showScrollBar: '=', loop: '=', autoplay: '=', initialSlide: '=', containerCls: '@', wrapperCls: '@', paginationCls: '@', slideCls: '@', direction: '@', swiper: '=', overrideParameters: '=', buttonClass: '@', breakpoints: '@' },

at top of controller:function() I add my break points. This is the messy part. At the moment if I need to load a responsive slider they will have the same breakpoints so I just hard coded it in here and when I load the slider I just write breakpoints="eventSlider" in the slider directive on my html template. It would be cool to add the breaks points directly to the html template in the near future but I didn't have time to troubleshoot it.

if ($scope.breakpoints == 'eventSlider') { var bp = { 1024: { slidesPerView: 6, spaceBetween: 0 }, 768: { slidesPerView: 5, spaceBetween: 0 }, 600: { slidesPerView: 4, spaceBetween: 0 }, 500: { slidesPerView: 3, spaceBetween: 0 }, 400: { slidesPerView: 2, spaceBetween: 0 }, 200: { slidesPerView: 1, spaceBetween: 0 } }; }

then in directive defaults i added breakpoints: bp || {}

// directive defaults var params = { slidesPerView: $scope.slidesPerView || 1, slidesPerColumn: $scope.slidesPerColumn || 1, spaceBetween: $scope.spaceBetween || 0, direction: $scope.direction || 'horizontal', buttonClass: $scope.buttonClass || '', loop: $scope.loop || false, initialSlide: $scope.initialSlide || 0, showNavButtons: false, breakpoints: bp || {} };

I hope this helps you.