Search code examples
angularjsangular-carousel

Infinite number of slides appended to an angular-carousel

I use rn-carousel with ng-repeat and I am able to swipe between all my items. However there is an infinite number of blank items appended to the list, meaning that I can swipe past my own items to the right an infinite number of time, it displays empty slides.

This happens even with a very basic markup:

<ul rn-carousel rn-carousel-controls class="swiper-container">
  <li ng-repeat="p in UseCaseCtrl.getProjects()">
    <img ng-src="{{p.picture}}">
  </li>
</ul>

and regardless of the device.

Also the next '>' control link is never displayed on any slide, which is quite misleading when the user lands on the first slide and does not even know there are others slides on the right.

Any guess on what could be the source of the problem? Or a way to debug?

Solution

  • In case someone faces the same issue, the root cause was my implementation of UseCaseCtrl.getProjects() which used to return an object. Internally, rn-carousel will use .length to determine the number of slides. Since it tried to make .length of an object with nested items, it could not work. The problem was solved by returning an array instead.