how to get current slide index: uib carousel

Question

I would like to get the current slide index onChange and not onClick but I don't know how do do that.

First, I had it with ng-click, like this:

In the .html:

<ul uib-carousel id="myCarousel" active="active" no-wrap="noWrapSlides"
        style="background-color: #0a0a0a; height:100%; width:100%; padding: 0">
        <li id="mySlides" uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"
            style="background-color: #0a0a0a; height: 100%;width: 100%;">
            <img ng-src="{{slide.imageUrl}}" ng-click="setSelectedImage(slide.data)" style="background-color: #0a0a0a; height: 100%;width: 100%; max-height: 640px; max-width: 800px"/>

        </li>
    </ul>

And in the .js:

 $scope.myInterval = 5000;
 $scope.noWrapSlides = false;
 $scope.active = 0;
 var currIndex = 0;
 var slides = $scope.slides = [];

 $scope.addSlide = function(media,data) {
      slides.push({
          imageUrl: $scope.urlWsImg+media.mediaId+"/stream/800",
          id: currIndex++,
          data:data
      });
 };

 $scope.addSlide($scope.currentImage.media,$scope.currentImage);//bootstrap
 for(var i=0;i<enrichedImages.length;i++) {
    var enrichedImage=enrichedImages[i];
    $scope.addSlide(enrichedImage.previewImage,enrichedImage);
 }
 $scope.setSelectedImage =function(imageUrl){
     $scope.currentEnrichedImage=imageUrl;
 }

I've tried on put an onchange="setSelectedImage(slide.data)" in #my-carousel, but it doesn't work since the slide is unknown when the change occurs.

I hope someone can help me.

score 3 · Accepted Answer · edited May 23 '17 at 22:43

3

You can't use ngChange because the directive doesn't expose any ngModel

From the ngChange docs

Note, this directive requires ngModel to be present.

But you have the active property that you can $watch

$scope.$watch('active', function(newIndex, oldIndex) {
    if (Number.isFinite(newIndex) && newIndex!==oldIndex) {
        // invoke your function here
    }
});

Here is a forked plunk

edited May 23 '17 at 22:43

Community

1
1

answered Jan 18 '17 at 20:06

svarog

9,477
4
61
77

I have implemented same as your example. but I never get the $watch called when slide change. I have open the screen in modal view. – Hiren Mar 03 '17 at 09:37
you should ask a new question and show your attempt – svarog Mar 03 '17 at 11:13
Can you please look into this ?http://stackoverflow.com/questions/42622483/i-want-to-know-the-current-slide-index-on-uib-carosal – Hiren Mar 06 '17 at 09:57

score 1 · Answer 2 · answered Dec 21 '17 at 18:03

1

It seems that active is holding the current index. You should be able to just use $scope.active.

answered Dec 21 '17 at 18:03

DeaMon1

572
5
10

how to get current slide index: uib carousel

2 Answers2