Slides generated with ng-repeat causing issues (slide-box)

Hi, sorry for my english … :stuck_out_tongue:

I just add this:

 $('.slider-slides,.slider-slide').width('100%');

after that my slider is showing, it’s no very proper but that’s work !

I had $ionicSlideBoxDelegate.update(); in my code and actually wasnt seeing this in beta 11 but am now seeing it in 13. Was it re-introduced?

So here is what I found fixed the problem for me… It seems some left/right positioning was commented out in the latest beta, that caused this problem. You can either uncomment them in the core or just add this after you load ionic…

.slide-ios,
.slide-left-right-ios7,
.slide-right-left-ios7.reverse {
  > .ng-enter, &.ng-enter,
  > .ng-leave, &.ng-leave {
    right: -1px;    
    left: -1px;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    z-index: 2;
  }

}
.slide-ios.reverse,
.slide-left-right-ios7.reverse,
.slide-right-left-ios7 {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    right: -1px;    
    left: -1px;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
    z-index: 1;
  }

}

add fresh slides on every selection from drop down on same page and see the slider-pager dots it goes on increase not consistency if slides as 2 means dots are 4 it adds previous 2 also

You might consider trying the nightly and apply the “breaking changes” from the post that is pinned to the top of the forum. I have had similar issues that have been posted here. I have not had a chance to try the nightly changes but I am planning on doing that in the near future.

I know this is old, but I ran into this issue as well while using an ng-repeat on a slider. My solution was pretty simple:

expose $ionicSlideBoxDelegate;

controllersModule.controller("ViewObservationCtrl", ["$scope", "$ionicSlideBoxDelegate",
function ($scope, $ionicSlideBoxDelegate) {      
    
        $scope.updateSlider = function () {
            $ionicSlideBoxDelegate.update(); //or just return the function
        }
    });
....

Then on my view I called the update function with ng-init:

 <ion-slide ng-repeat="image in observation.images.image" ng-init="updateSlider()">                  
         <img src="...jpg"/>                
  </ion-slide>
8 Likes

Has anyone fixed this in css as the css is uncommented in beta 13 and still doesnt work…

This solution worked for me :slight_smile:

I ended up using ng-if to solve this problem.

Hey, this issue can be solved by using the update method as you have mentioned, the trick is when to mention it.

Now in the newest version, the following code always worked for me.

$scope.$on(’$ionicView.enter’, function(){
$timeout(function() {
$ionicSlideBoxDelegate.$getByHandle(‘coursecontent’).update();
$ionicSlideBoxDelegate.$getByHandle(‘coursescope’).update();
},0)
});

First, we need to know when it is rendered. Next, using $timeout and set it to zero will ensure it start at the first digest cycle of angular, so it will worked always.

Remeber, some view is cached in Ionic, so instead of using $ionicView.loaded , we use $ionicView.enter.

Worked perfectly for me too… :smile: Thanks.

Worked like a charm! Thanks. :slight_smile:

@amrudesh @avago @coen_warmer @cata_rock @mrameezraja Is anyone got the Solutions on this issue?

@Thamil I haven’t had any problem in Beta 13 or 14 using $ionicSlideBoxDelegate.update();

1 Like

This is my fix, call update on state change success, and set a timeout. Works well.

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
  $timeout(function() {
    $ionicSlideBoxDelegate.update();
  }, 50);
});
1 Like

if $ionicSlideBoxDelegate.update(); isn’t working for you, It should . You can fix this issue in your css. I noticed that the class
’.slider-slides’ wasn’t being updated. the width was being set to 0.

You can wrap you code in a simple directive that uses jquery or document.getElementById and change its width to $(window).widht() * the number of slides. This is very janky, but if you are out of solutions, you can give it a try.
Hope this works!

Maybe this can work for you:

Service

GetImages : function() {
    return $http.get(BASE_URL).then(function(response){
        images = response;
        return images;
   });
}

Controller

Service.GetImages().then(function(response){
    $scope.images = response;
    $ionicSlideBoxDelegate.update();
});

View

<ion-slide-box>
    <ion-slide ng-repeat="image in images">
        <img ng-src="{{image.file}}"/>
    </ion-slide>
</ion-slide-box>
1 Like

Great solution
Thanks very well

I have the same problem. So, what is the solution?

Fixed my issues wherein I was getting banner images via a REST api. Thanks! :smile: