uib-carousel animations for sliding next and prev stop working

[Nandez89]

Please review, for uib-carousel in 1.1.1 with angular 1.4.9 (including animate 1.4.9) and boostrap 3.3.6

The pictures only rotate when the carousel is open/created with the first slide active, if other slide is set to active from the beginning then the next and prev won't rotate/animate. This issue also happens on the demo code plunkr that's posed on the docs.

Interval set to 5000, no wrap set to false manually slides are objects with keys (image, active, text and id). I'm not sure if this might interfere for mouse events but I'm using it inside a modal.

To reproduce add the key and value "active: currIndex === 2" on the demo code in plunkr. Also, leave focus of the window/tab for a while and come back animations have stop working.

[wesleycho]

Can you post a reproduction on Plunker?

[Nandez89]

http://plnkr.co/edit/UTsOV8HmaKT917D4M3Tj?p=preview

[Nandez89]

Alright I think I have some pointers that might help to the person that tries to fix this.

When the active slide is not the first one a transition gets started to "move" to the active slide causing $scope.$currentTransition to be set to true, but that transition is never cleared so when the next ones comes the code goes to the else if in line 468 the part of "//Prevent this user-triggered transition from occurring if there is already one in progress" because the $scope.$currentTransition was not cleared.

This doesn't happen when the active slide is the first one because no transitions start in this case.

Also I think this happens because on the addSlide function clearing the $scope.$currentTransition to null happens before trying to ".select()" the active slide so it will be set to true again.

Its my best guess but I'm not 100% sure is that line 387 should be moved to line 383 so:

if ($scope.$currentTransition) {
    $scope.$currentTransition = null;
}

self.select(slides[slides.length - 1]);

would become:

self.select(slides[slides.length - 1]);

if ($scope.$currentTransition) {
    $scope.$currentTransition = null;
}

Please have a look @wesleycho

[svan001]

I have the same issue. I can only get it to work with Angular 1.3.X + ui-bootstrap 0.14.3 (still using bootstrap CSS 3.3.6), anything more recent seems to be broken that way.

Also I tried Nandez89 patch and it seems to solve the problem.

[wesleycho]

I think this is fixed in the new api change in 32a247471f53024fd573051b02f22f7e6c901046, as seen here.

[gazpachu]

Hi,

my team and I were experiencing this issue with "Angular" and "angular-animate" 1.5.3 and after updating to 1.5.5, the issue is still there. We have also updated "angular-bootstrap" to 1.3.2.

$scope.$currentTransition = true; in goNext() is still breaking the carousel navigation. If we comment out that line, then everything works fine.

The problem seems to be related with ngAnimate, as this method is not triggering:

$animate.on('addClass', slides[index].element, function(element, phase) {

Therefore, the condition if (phase === 'close') is never happening and then $scope.$currentTransition = null; is never set.

Thanks.

[galkahana]

+1 for @gazpachu suggestion to comment out $scope.$currentTransition = true; i'm getting the same issue when moving between to another tab on the browser. this solves the problem.

[gazpachu]

Regarding my previous comment, this is something difficult to show in a plnkr, as it's happening when the carousel is used in conjunction with other modules, pages, etc. So, if no one is going to pay attention to this issue because there's no plnkr to prove it, then this issue will never be fixed :(

[wesleycho]

That's not the rationale - the rationale is that we have a limited amount of time, and we are not mindreaders. It turns out an extraordinary amount of time gets wasted when issues are reported without detailed reproductions, and sometimes they turn out to not be bugs at all, but we cannot know that without a base to work off of.

Claiming there's a bug is one thing, but demonstrating that it is indeed a bug and not user error is another.

[RichardCroxall]

I had the same issue. I am using ui-bootstrap--tbls-1.1.1.js. In function goNext(), I commented out the line //$scope.$currentTransition = true; and that seems to have fixed the problem for me.

[niyando]

I got it working by updating the scope inside a timeout

index = 1;
$timeout(function() {
  $scope.slides[index].active = true;  
})

Hope this helps.

[sbaechler]

I am still having this issue with ui.bootstrap 2.5.0. $scope.$currentTransition doesn't get reset at the end of the transition. (Angular 1.5.8)

It looks like the $animate addClass callback handler is not called.

[Dev63]

I apparently successfully masked this problem by adding

$timeout( function() { $scope.$currentTransition = false; }, 800 );

below the line in GoNext referenced by @RichardCroxall above. This enables me to keep the transition protection (without this, double-clicking on Next causes temporary UI pandemonium), yet ensure the transition period ends so that the carousel doesn't freeze when the browser loses focus for a while.