angular-swiper
angular-swiper copied to clipboard
Breakpoints
Hi, I am trying to use breakpoint object but its not working for me. Can you please tell me how to use it.
Here is my code
<ks-swiper-container
initial-slide="1"
loop="true"
show-nav-buttons="true"
slides-per-view="3"
space-between="5"
autoplay="2500"
pagination-clickable="false"
override-parameters="{'centeredSlides':'true','breakpoints': {'320': {'slidesPerView': '1'}}}">
<ks-swiper-slide class="swiper-slide" ng-repeat="slide in slides">
<img ng-src="{{slide.image}}">
</ks-swiper-slide>
</ks-swiper-container>
Try to use numbers for the breakpoint values instead of strings:
override-parameters="{'centeredSlides':'true','breakpoints': {320: {'slidesPerView': '1'}}}"> <ks-swiper-slide class="swiper-slide" ng-repeat="slide in slides"
Also, please note that the breakpoint is set for the lower limit. "320" applies for screens smaller than 320px which is not very likely to happen. See the official documentation for details: http://idangero.us/swiper/api/
No that won't work, we need to increase the version of swiper dependency as breakpoints are available from ^3.2.0 by swiper