Search code examples
javascriptcssangularjsangular-carousel

angular carousel indicator not working

I am using angular-carousel to display set of images in a carousel. The carousel is working fine except the indicator.The indicator are not getting displayed. Following is the code for carouse.

  <ul rn-carousel rn-carousel-pause-on-hover="" rn-carousel-auto-slide="" class="image" ng-init="images = ['assets/img/1.png','assets/img/2.png','assets/img/3.png']">
    <li ng-repeat="image in images"><img src="{{image}}"/></li>
  </ul>

The following is the div to display the indicator.

<div rn-carousel-indicators ng-if="images.length > 1" slides="images" rn-carousel-index="carouselIndex"></div>

Can anybody suggest how to get the indicator working. enter image description here

Solution

  • You need to bind carouselIndex to the carousel directive:

    <ul rn-carousel rn-carousel-pause-on-hover="" rn-carousel-auto-slide="" rn-carousel-index="carouselIndex" class="image" ng-init="images = ['assets/img/1.png','assets/img/2.png','assets/img/3.png']">