ksachdeva/angular-swiper

Breakpoints

Opened this issue · 2 comments

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