search

ksachdeva / angular-swiper

Angular directive for nolimits4web/Swiper
Apache License 2.0
197 stars 94 forks source link

Breakpoints #50

Open naumanahmed19 opened 8 years ago

naumanahmed19 commented 8 years ago

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>
markuspalme commented 7 years ago

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/

ghost commented 7 years ago

No that won't work, we need to increase the version of swiper dependency as breakpoints are available from ^3.2.0 by swiper