2

我使用引導程序傳送帶來滑過我從外部API引入的數據。 API數組中的第一個元素出現在傳送帶上,但是當我按下「下一個」或「上一個」箭頭按鈕時,屏幕閃爍,並且出現此錯誤:Uncaught TypeError: Cannot read property 'offsetWidth' of undefined如何修復引導程序傳送帶'offSetWidth'錯誤

這個錯誤是什麼意思,我該如何解決?起初我認爲這意味着它不能讀取那些尚未存在的數據,因爲API數據花費的時間過長,但這不可能是真實的,因爲第一張幻燈片顯示正常。

這裏是我的html,如果有幫助:

<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 --> 

回答

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> 

我的回答可能爲時已晚,但可以幫助別人誰在未來的需求。在class =「carousel slide」存在的第一行代碼中,必須用class =「carousel」ng-class =「slides.length?'slide'替換:''」,它確保只有項目存在時纔會添加幻燈片效果。