Synchronize two angular ui bootstrap carousels

Question

I am trying to create two synchronized carousels in a page using angular ui bootstrap. I tried setting variable

 myinterval

Same. For two carousel same. But after sometime they go out of sync. Also if user hovers over one carousel it should also pause the other. Any pointers on how to achieve this.

Here is a plunker example http://plnkr.co/edit/SOy6yn7MAQ98tgmvVucC?p=preview

I don't think this version of carousel supports this functionality. It receives the value in milliseconds of interval, but it is not the same invoking interval function. — New Dev, Dec 23 '14 at 01:54
Was able to solve it with help of these threads http://stackoverflow.com/questions/24686119/how-do-you-bind-to-angular-uis-carousel-slide-events http://stackoverflow.com/questions/24952433/setting-active-slide-on-angular-ui-bootstrap-carousel — whippits, Dec 24 '14 at 02:12

score 0 · Accepted Answer · edited May 23 '17 at 12:30

Was able to solve it with help of these threads.

How do you Bind to Angular-UI's Carousel Slide Events?

Setting active slide on angular-ui-bootstrap carousel

1) Get the current slide of first carousel by

$scope.$watch(function () {
  for (var i = 0; i < slides.length; i++) {
  if (slides[i].active) {
      return slides[i];
     }
    }
  }, function (currentSlide, previousSlide) {
      if (currentSlide !== previousSlide) {
       console.log('currentSlide:', currentSlide);
    }
 });

2) Now that you have the current slide. Set the second carousel with this index.

Synchronize two angular ui bootstrap carousels

1 Answers1