UI引導傳送帶第一張幻燈片不顯示，然後在最後一張幻燈片崩潰

我想實現ui-bootstraps傳送帶，但當頁面加載第一個圖像不顯示，但控件和指標。UI引導傳送帶第一張幻燈片不顯示，然後在最後一張幻燈片崩潰

然後，當第二個圖像顯示，我可以使用控件返回到第一個圖像，它會顯示罰款。我可以使用控件來到最後一張幻燈片或讓它自動滑動，但是當我到達最後一張幻燈片時，傳送帶停止工作，並給出錯誤「無法讀取未定義的屬性」幻燈片，該幻燈片指向ui的第576行-bootstrap-tpls.js文件。

不知道我在做什麼錯，因爲這似乎很容易實現，這裏是我的代碼，這裏是一個鏈接到一個網站的一個活生生的例子發生了什麼。

Example Site

查看

<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('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'} 
    ]; 
};

*編輯

我試過了常規的bootstrap旋轉木馬，它工作正常。我可以用它來解決這個問題，但是我想知道我在用ui-bootstrap旋轉木馬做錯了什麼。

來源

2016-05-02 Grant Jordan

試圖改變你的代碼通過$指數slide.id，而不是使用軌跡跟蹤，並看看這是否有幫助。 –

@AlexChance這樣做了。非常感謝。我想知道爲什麼我的原始方法不起作用，因爲文檔是如何工作的。 –

這可能是你格式化你的ID的方式。我調試了你網站上的代碼，並看到這一行'angular.extend（q [s] .slide || {} .....'當我檢查's'時，它包含「4」，並且由於數組的幻燈片只有4個元素，最後一個元素是[3]，這就是爲什麼它會拋出錯誤。也可以解釋爲什麼它不會立即顯示第一張幻燈片，如果它期望[0]，並且您的第一張幻燈片ID爲「1」，使其成爲第二個元素 –

我收到一個類似的錯誤，它說：「TypeError：無法讀取未定義的屬性」幻燈片「。

我跟着一個評論在這裏和改變：

index="slide.id"

爲

index="$index"

這解決了這一問題。我注意到這沒有答案，所以我想提交這個。

來源

2016-07-31 19:50:56

所以基本上'slide.id'應該已經從* 0 *（_zero_）開始，因爲屬性'index'似乎是指array_的_index。 – Giraldi

謝謝喲你好先生 –

問題是在IDS - 您的圖片的第一個ID應該是0，你會就好了

來源

2016-08-20 12:52:58 vvn050

UI引導傳送帶第一張幻燈片不顯示，然後在最後一張幻燈片崩潰

回答

相關問題