10

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.

Grant Jordan
  • 428
  • 7
  • 19
  • 2
    Try to change your code to use track by $index, instead of track by slide.id, and see if that will help. – Alex Chance May 02 '16 at 16:35
  • @AlexChance That did it. Thanks so much. I wonder why my original method doesn't work as that is how the documentation does it. – Grant Jordan May 02 '16 at 16:49
  • It may be the way that you are formatting your IDs. I debugged the code on your site, and saw this line `angular.extend(q[s].slide || {}.....` When I inspected `s`, it contained "4", and since the array of slides only has 4 elements, the last element would be [3], which is why it was throwing the error. May also explain why it wouldn't show the first slide immediately, if it was expecting [0], and your first ID is "1", making it the 2nd element. – Alex Chance May 02 '16 at 16:54
  • @AlexChance I was thinking the same thing after I saw track by $index worked, so I tried changing the ids to start at 0 but I still got first slide not showing although no error at the end. Thanks again for your help. – Grant Jordan May 02 '16 at 17:00
  • Well as long as it fixed your problem, I probably wouldn't waste too much trying to figure it out. Glad I could help. – Alex Chance May 02 '16 at 17:03

2 Answers2

37

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.

V.Hughes
  • 386
  • 4
  • 4
  • 3
    So basically the `slide.id` should have started from *0* (_zero_) since the attribute `index` seems to be referring to the _index of the array_. – Giraldi Dec 04 '16 at 10:03
6

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

vvn050
  • 194
  • 2
  • 4
  • I agree, I was using the object's ids which weren't in consecutive order, I then added an indexing order id and worked afterwards. – Remus.A Jul 19 '18 at 08:58