angular-swiper icon indicating copy to clipboard operation
angular-swiper copied to clipboard

Used Swipe fix for ng-repeat, now it always loads to the last slide

Open madcowvaping opened this issue 8 years ago • 1 comments

Hi Guys,

I have used the fix noted in #25 I am calling my data from a server json request using ng-repeat to display in my swiper. I know there is a previous issue using ng-repeat data with swiper, so I used the above fix. Most of the issue now is because I am using slides-per-view to try to create a 3 x 2 tiled effect of the data on screen. If I select 1 slide per view it is fine but when i select more than 1 slide per view the slides load correctly but default to the last slide, making the user then swipe back to the first slide. Once the user selects one of the slides it all works perfectly, this is just a problem on initial load, or reload.

This is my html view:

<ks-swiper-container initial-slide="0" slides-per-view="3" slides-per-column="2" slides-per-group="3" space-between="20" swiper="swiper" on-ready="onReadySwiper(swiper)" pagination-is-active="true" >
<ks-swiper-slide ng-repeat="cat in cats">
<a href="#/juice/{{cat.catid}}">
<img ng-src="{{ cat.imgpath }}" width="363" height="195" alt=""/>
</a>
</ks-swiper-slide>
</ks-swiper-container>
<div class="swiper-pagination"></div>

This is my Controller

angular.module('App.Controller', [])
.controller('CatController', ['$scope', 'categories', function ($scope, categories) {
     categories.success(function (data) {
          $scope.cats = data;
      $scope.onReadySwiper = function (swiper) {
	swiper.initObservers();
      };
  });
}])

I am very new to coding and forum etiquette, so if i haven't put enough information please let me know. Thanks in advance for any help.

madcowvaping avatar Nov 10 '16 23:11 madcowvaping

try setting width 100vh to the slider container. Or wrap all the children elements or slider inside div component and set width to that div component

noushad-pp avatar Jul 03 '17 08:07 noushad-pp