Preventing Angular UI Bootstrap Carousel slides from merging during transition

Question

I have a use case where an Angular UI Bootstrap Carousel is populated from an array of objects. Each slide in the carousel is populated with subcategories. When a user clicks a link for a category, the carousel will transition to the new slide. Each slide contains the subcategory data.

The problem I am encountering is that the content of two slides will join together when a user clicks one category link and then clicks another while the slides are transitioning. I would like to prevent this behavior.

My suspicion is around ngAnimate and the ng-repeat attribute that I use in each slide. Your thoughts are appreciated on how to resolve this.

Plunker:

I have created a plunker. To recreate the issue, click the button "Show Slide 2" to start the transition from slide 1 to slide 2. Then quickly click "Show Slide 3" to see how the content is merged into one slide.

Javascript:

'use strict';

var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']);

app.controller('MainCtrl', ['$scope', 'dataService', function ($scope, dataService) {

var data = dataService.getCategories();

//Setup carousel slides.
$scope.index = 0;
$scope.slides = [];
$scope.slides.push(data[0]);
$scope.slides.push(data[1]);
$scope.slides.push(data[2]);
$scope.slides[$scope.index].active=true;

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

}]);

app.factory('dataService', [function() {

return {
  getCategories: getCategories,
};

function getCategories() {
  return [
    { category: 'Category A', items: [
      {id: 'a', name: 'Subcategory A', image: 'http://lorempixel.com/g/400/200'},
      {id: 'b', name: 'Subcategory B', image: 'http://lorempixel.com/g/401/200'},
      {id: 'c', name: 'Subcategory C', image: 'http://lorempixel.com/g/402/200'},
      {id: 'd', name: 'Subcategory D', image: 'http://lorempixel.com/g/403/200'},
    ],},
    { category: 'Category B', items: [
      {id: 'e', name: 'Subcategory E', image: 'http://lorempixel.com/g/404/200'},
      {id: 'f', name: 'Subcategory F', image: 'http://lorempixel.com/g/405/200'},
    ],},
    { category: 'Category C', items: [
      {id: 'g', name: 'Subcategory G', image: 'http://lorempixel.com/g/406/200'},
      {id: 'h', name: 'Subcategory H', image: 'http://lorempixel.com/g/407/200'},
    ],},
  ];
}
}]);

Bellu · Accepted Answer · 2015-11-17 23:46:04Z

2

I think that you need to deactivate the old category index, to prevent that two categories become "active". Here a working plunkr.

$scope.oldIndex = 0;
$scope.populateCarouselWithCategory = function(index) {
  $scope.slides[$scope.oldIndex].active=false;
  $scope.slides[index].active=true;
  $scope.oldIndex = index;
};

answered Nov 17, 2015 at 23:46

Bellu

2,5732 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gregg Over a year ago

Thank you @Bellu. That fixed my issue. :-D

Collectives™ on Stack Overflow

Preventing Angular UI Bootstrap Carousel slides from merging during transition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related