ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

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

Closed CoenWarmer closed 10 years ago

CoenWarmer commented 10 years ago

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 commented 10 years ago

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

CoenWarmer commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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

perrygovier commented 10 years ago

I believe this and ticket #1473 may be related.

tristobal commented 9 years ago

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 commented 9 years ago

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

funnyjoker commented 9 years ago

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

jackyon commented 9 years ago

hm... issue still exist...

jackyon commented 9 years ago

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

funnyjoker commented 9 years ago

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

systembugtj commented 9 years ago

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

systembugtj commented 9 years ago

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

EdwardsBean commented 9 years ago

issue still exist.version 1.0.1

guyanbiao commented 9 years ago

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 commented 9 years ago

@guyanbiao thx,works great

edailton commented 9 years ago

@guyanbiao thanks, works!

felixschul commented 8 years ago

@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 commented 8 years ago

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