2016-05-02 22 views
7

ui-bootstraps karuselini uygulamaya çalışıyorum ancak sayfa ilk yüklendiğinde gösterilmez, ancak denetimler ve göstergeler yapar.UI bootstrap carousel ilk slayt, son slaytta çöker sonra gösterilmez

Ardından, ikinci görüntü gösterildiğinde, ilk resme geri dönmek için denetimleri kullanabilir ve iyi görünecektir. Son slayta geçmek için denetimleri kullanabilir veya otomatik olarak kaymasına izin verebilirim, ancak son slayda geldiğimde karusel çalışmayı durdurur ve "UI satırının 576'sına işaret eden undefined öğesinin 'slide' özelliği okunamaz" hatası verir. -bootstrap-tpls.js dosyası.

Bunun ne yaptıklarından emin olmadığımdan emin olmak çok basit gözüküyor, işte benim kodum ve burada bir siteye giden ve neyin var olduğunu gösteren canlı bir bağlantı.

Example Site

Görünüm

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

Kontrolör

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

* edit

Normal önyükleme karuselini denedim ve iyi çalışıyor. Sorunu çözmek için kullanabilirim ama ui-bootstrap karuseli ile ne yaptığımı anlamaya çalışıyorum.

+2

deneyin olacak ve Bunun yardımcı olup olmayacağını gör. –

+0

@AlexChance Bunu yaptı. Çok teşekkürler. Özgün yöntemimin neden çalışmadığını merak ediyorum, çünkü bu dokümantasyon bunu nasıl yapıyor? –

+0

Kimliklerinizi biçimlendirme şekliniz bu olabilir. Sitenizdeki kodu ayıkladım ve bu satırı gördüm 'angular.extend (q [s] .slide || {} ..... '' ın s denetlediğimde, "4" içeriyordu ve diziden beri slaytların sadece 4 elementi vardır, son eleman [3] olur, bu yüzden hatayı atıyordu. Ayrıca ilk kaydı hemen gösteremediğini de açıklayabilir, eğer [0] bekliyorsa ve ilk ID, "1.", 2. elemanı yapıyor. –

cevap

28

Benzer bir hata alıyordum, diyordu: "TypeError: undefined özelliği 'slayt' okunamıyor".

Burada yorumlardan birini takip değiştirdi:

index="slide.id" 

index="$index" 

için Ve bu sorun giderildi. Bunun bir cevabı olmadığını gördüm, bu yüzden bunu göndermek istedim.

+2

Temelde 'slide.id' * 0 * (_zero_) 'dan başlamış çünkü' index 'özniteliği array_ _index'e atıfta bulunduğundan dolayı. – Giraldi

+0

teşekkürler yo sen çok efendim –

3

sorun kimlikleri ise - resminizin ilk id 0 olmalıdır ve slide.id tarafından yerine parçanın, $ endeksine göre parçayı kullanmak için kodunuzu değiştirmek için sadece iyi

İlgili konular