ksachdeva / angular-swiper

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

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

Open madcowvaping opened 8 years ago

madcowvaping commented 8 years ago

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.

noushad-pp commented 7 years ago

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