ui-swiper
ui-swiper copied to clipboard
nebulr
slides-per-view="auto" doesn't work
<head>
<link rel="stylesheet" href="bower_components/angular-ui-swiper/dist/angular-ui-swiper.css"/>
</head>
<body ng-app="app">
<swiper slides-per-view="auto" watch-slides-visibility="true">
<slides>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
<slide><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/e2/e5/fce2e5de47aa003aab1bd6e29c0d8954.jpg"></slide>
</slides>
<pagination></pagination>
</swiper>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src="bower_components/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
<script>
angular.module('app', ['ui.swiper']);
</script>
</body>
With this basic setup using http://idangero.us/swiper you get a single row of items, you can drag them, and you'll see the new ones enter at the right as the others exit left.
With ui-swiper, you get a single, centered image and you have to drag it all the way to the left hand side of the browser before the next one enters to the right.
I believe it should be:
<swiper slides-per-view="'auto'" watch-slides-visibility="true">
As per documentation:
slidesPerView | number or 'auto'
Hi there! I'm wondering how to replicate this same thing with other values. Let's say breakpoint, this doesn't work for me:
<swiper class="summary-bar-container" slides-per-view="4" watch-slides-visibility="false" breakpoints="{320: { slidesPerView: 2, spaceBetween: 20 }, 800: { slidesPerView: 4, spaceBetween: 40 }">
As failover I'm trying to use it in the controller but it doesn't find Swiper neither.
Any suggestion?
