CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapcarouselangular-carousel
user168983
user168983

Reputation: 844

Angular Carousels: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined while using carousels with Angular JS

Before I ask I have gone through this, but this doesnt seem to be issue in my case. I am using plain text carousels in angularJS , with this example as reference.

I am trying to set active class for carousel with 1st index element of the angular array and then the other items will be from the 2nd index. It is showing up the active element,but When I am trying to click for the second element it is giving the above error.

Following is what I have done so far.

HTML file :

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>

</head>

<div id="myCarousel" style="height:100px" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    
    <ol layout="row" class="carousel-indicators" >
    <div  ng-repeat="message in messages">
      <li  data-target="#myCarousel" data-slide-to="$index" class="active" ng-if="$index === 0" ></li>
      <li  data-target="#myCarousel" data-slide-to="$index"  ng-if="$index !== 0" ></li>
   </div>
   
   
    </ol>
    
    <!-- Wrapper for slides -->
    <div layout="row"  class="carousel-inner" ng-repeat="message in messages"  role="listbox">
      <div class="item active" ng-if="$index === 0">
        {{message.text}}
      </div>
     <div  class="item" ng-if="$index !== 0">
        {{message.text}}
      </div>
  
    </div>


  </div>

Can someone help me in understnading the carousel display here and why the error has given, I have set active element as mentioned in the other post but it still doesnt solve the issue.

Thanks in advance

Upvotes: 0

Views: 1712

Answers (2)

user168983
user168983

Reputation: 844

I found the issue is not with the "Active" class, It is with the usage of "$index" in angular ng-repeat. In condition where sliding is set,

data-slide-to="$index" should be replaced by data-slide-to="{{$index}}"

When we tried to click the slide, the data target which is set to a value, given by $index is coming as null and hence undefined error occurred. Rest of the code has no issues and the error is fixed.

Upvotes: 0

Ernestas Romeika
Ernestas Romeika

Reputation: 171

Your ng-repeat will make a new outter div with "carousel-inner" class for each item in your messages, instead what you want to do is to move it to the inside, like so:

<div layout="row"  class="carousel-inner product-carousel" role="listbox">
    <div class="item active" ng-if="$index === 0" ng-repeat-start="message in messages">
       {{message.text}}
    </div>

    <div  class="item" ng-if="$index !== 0" ng-repeat-end>
       {{message.text}}
    </div>
</div>

use ng-repeat-start and ng-repeat-end when you want to iterate repeat over multiple elements without encapsulating them in another element.

Upvotes: 1

Related Questions