UI bootstrap carousel first slide doesn't show

Question

I am trying to implement ui-bootstraps carousel but when the page loads the first image doesn't show but the controls and indicators do.

Then, when the second image shows, I can use the controls to go back to the first image and it will show fine. I can use the controls to get to the last slide or let it slide automatically but when I get to the last slide the carousel stops working and gives the error "Cannot read property 'slide' of undefined" which points to line 576 of the ui-bootstrap-tpls.js file.

Not sure what I'm doing wrong as this seems pretty simple to implement, here is my code and here is a link to a site with a live example of whats going on .

Example Site

View

<div class="slider">
  <uib-carousel active="active" interval="3000">
    <uib-slide ng-repeat="slide in home.slides track by slide.id" index="slide.id">
      <img class="img-responsive" ng-src="{{slide.img}}" alt="{{slide.alt}}">
    </uib-slide>
  </uib-carousel>
</div>

Controller

.controller('HomeCtrl', function() {
  var vm = this;

  vm.slides = [
    {id: "1", img: 'img/slider/customer.jpg', alt: 'customers'},
    {id: "2", img: 'img/slider/juices.jpg', alt: 'e-juice'},
    {id: "3", img: 'img/slider/lineup.jpg', alt: 'vaporizers'},
    {id: "4", img: 'img/slider/vapeon.jpg', alt: 'vape on'}
  ];
};

*edit

I tried out the regular bootstrap carousel and it works fine. I can use it instead to solve the problem but I'd rather figure out what I'm doing wrong with the ui-bootstrap carousel.

Answer 1

I was receiving a similar error, it was saying: "TypeError: Cannot read property 'slide' of undefined".

I followed one of the comments here and changed:

index="slide.id"

for

index="$index"

And that fixed the problem. I noticed this did not have an answer so I wanted to submit this.

Answer 2

the problem is in ids - the first id of your picture should be 0, and you will be just fine