Slidebox doesn't continue anymore when it reaches end (mix of static slides and ng-repeat slides)

[CoenWarmer]

When using a an ng-repeat for ion-slides, the slidebox won't continue sliding when it reaches the last slide. It just stops when it reaches the end.

Tried with setting does-continue=true explicitly and without.

Tested on 1.0.0 beta 6.

[perrygovier]

Hi CoenWarmer, good catch. Can you put together an example in codepen.io for us to test against?

[CoenWarmer]

Cool @perrygovier! Welcome to the team btw, great to have you.

About the issue: narrowed it down a bit.

When using ng-repeat on ion-slides, and the ng-repeat isn't ready exactly on compile (when using a $timeout for instance) you need to use IonSlideBoxDelegate.update() to update the slides. When the slideshow then reaches the end, it stops.

When the ng-repeat is immediately available (can be simulated by removing the $timeout in the example below), the slider does continue as expected.

Codepen: http://codepen.io/squrler/pen/fadjs

[perrygovier]

It appears the bug is with there being a mix of regular elements and ng-repeat elements and does-continue="true". Here's an example with two static slides along with the ng-repeat. Things get really wonky. http://codepen.io/perrygovier/pen/vdyhp

[CoenWarmer]

Yeah... see what you mean... Does this help in narrowing down where things go bad?

[perrygovier]

I believe this and ticket #1473 may be related.

[tristobal]

As workaround...

JS

    <ion-slide-box
        does-continue="true"
        auto-play="true"
        slide-interval="{{interval}}"
        show-pager="true"
        pager-click="changeSlide(index)"
        on-slide-changed="slideHasChanged(index)">
        <ion-slide ng-repeat="imagen in carrusel">
            <img ng-src="{{imagen.img}}" height="auto" width="100%">
        </ion-slide>
    </ion-slide-box>

CTRL

$scope.interval = 2000;

$scope.slideHasChanged = function(index) {
    $scope.slideIndex = index;
    if ( ($ionicSlideBoxDelegate.count() -1 ) == index ) {
        $timeout(function(){
            $ionicSlideBoxDelegate.slide(0);
        },$scope.interval);
    }
};

[tiagojdf]

Was this ever fixed or do we still need the work around?

[funnyjoker]

has this bug been fixed? I have the similar experience, if use the method written by @tristobal , it seems so weird ...

[jackyon]

hm... issue still exist...

[jackyon]

@tristobal solution also not the perfect one, it happened some bugs when switch some pages. (for example: stop auto play & slides increase)

[funnyjoker]

it seemed I had fixed this problem like this : ng-repeat="item in items track by $index"

[systembugtj]

I try the track by, ng-if and $timeou to udpate, nothing works for me. I can still repro.

[systembugtj]

Issue claim to be closed. But still repro on 1.0.0 latest

[EdwardsBean]

issue still exist.version 1.0.1

[guyanbiao]

https://github.com/driftyco/ionic/blob/6c9bc15b2996ae9183624c84a2709fd33f80d20b/js/views/sliderView.js#L55

It's because first time the Slider initialized "slides.length" is equal to 0, the "options.continuous" is set to false, when "IonSlideBoxDelegate.update() " called, "options.continuous" is not retrieved from the settings but keep to be false.

change

      if (slides.length < 2) options.continuous = false;

to

      if (slides.length < 2) {
        options.initialContinuous = options.continuous;
        options.continuous = false;
      } else if (options.initialContinuous) {
        //if original  continuous is true, recover it
        options.continuous = options.initialContinuous;
      }

solve the problem

[EdwardsBean]

@guyanbiao thx,works great

[edailton]

@guyanbiao thanks, works!

[felixschul]

@guyanbiao Works great! Why did you not open this as pull-request so it can be included in the master branch? It seems the bug still persists in the latest version of ionic 1 and I think it is rather ugly to change this in the ionic bundle. @ajoslin Would you include this in ionic 1?

[ntrp]

Another workaround is to get the $ionicSlideBoxDelegate and call the method loop(true). I am using Ionic 1.3.1.