2

I'm using bootstrap carousel to slide through data I'm bringing in from an external API. The first element in the API array shows up on the carousel, but when I press a 'next' or 'prev' arrow button, the screen blinks and I get this error: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined.

What does this error mean, and how can I fix it? At first I thought it meant it couldn't read data that wasn't there yet because the API data took too long to fetch, but that can't be true because the first slide shows up fine.

Here is my html if it helps: 

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li ng-repeat="item in slides" data-target="#myCarousel" data-slide-to="item" ng-class="{active : $first}"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item" ng-class="{active : $first}" ng-repeat="item in slides">
      <img class="first-slide" ng-src="{{item.media[0]['media-metadata'][0].url}}" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>{{item.title}}</h1>
          <p>{{item.main}}</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div><!-- /.carousel -->
just another profile name
  • 722
  • 1
  • 9
  • 31

1 Answers1

1
<div id="myCarousel" class="carousel" ng-class="slides.length?'slide':''" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li ng-repeat="item in slides" data-target="#myCarousel" data-slide-to="item" ng-class="{active : $first}"></li>
</ol>

My answer may be too late, but may help someone who needs in future. In 1st line of code where class="carousel slide" exists has to be replaced by class="carousel" ng-class="slides.length?'slide':''" which makes sure slide effect is added only when items exists.

sharath
  • 11
  • 1