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

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.

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Comments: 19 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

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

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);
    }
};

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