responsive about angular-swiper

[brh55]

Hi there @hbhasin3 ,

Use the breakpoints param (http://idangero.us/swiper/api/#.V8hq_5MrI_U)

Ie: For mobile (TIP: it's best practice to refer it as screen sizes (small,medium,etc)) , you would want to set up a breakpoint. Take a look at http://mydevice.io/devices/ to try to gauge and target particular devices.

  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetweenSlides: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetweenSlides: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetweenSlides: 30
    }

Now pass in that object like so with the override-parameters attribute, it should work for you.

<ks-swiper-container override-parameters="{ 'breakpoints': { '320': { 'slidesPerView': '1' }}}">
    <ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]">
      <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
    </ks-swiper-slide>
</ks-swiper-container>

[hbhasin3]

sorry for disturbing you again but mine is not working
please provide me a small working example in angular
thank you

[hbhasin3]

if am taking override-parameters="{'effect':'cube'}" then it i taking those parameters and effect is show of the same but when i pass breakpoints then the effects are not shown for the same

[hbhasin3]

issue resolved thank you 👍

[brh55]

@ksachdeva Close issue when u get a chance.

I tried everything and breakpoints definitely didn't work until i increased the version of swiper dependency to ~3.2.0. Think it's time for increasing the supported version of swiper dependency.