UI bootstrap Karussell erste Folie zeigt nicht, dann stürzt auf letzte Folie

Ich versuche, UI-Bootstraps Karussell zu implementieren, aber wenn die Seite lädt das erste Bild zeigt nicht, aber die Kontrollen und Indikatoren tun.UI bootstrap Karussell erste Folie zeigt nicht, dann stürzt auf letzte Folie

Dann, wenn das zweite Bild zeigt, kann ich die Steuerelemente verwenden, um zum ersten Bild zurückzukehren, und es wird gut angezeigt. Ich kann die Steuerelemente verwenden, um zur letzten Folie zu gelangen oder sie automatisch gleiten zu lassen, aber wenn ich zur letzten Folie komme, hört das Karussell auf zu arbeiten und gibt den Fehler "Objekt nicht lesen" von 'undefined ", was auf Zeile 576 des ui zeigt -bootstrap-tpls.js-Datei.

Nicht sicher, was ich falsch mache, da dies scheint ziemlich einfach zu implementieren, hier ist mein Code und hier ist ein Link zu einer Website mit einem Live-Beispiel für was los ist.

Example Site

Ansicht

<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

.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

Ich habe das normale Bootstrap Karussell ausprobiert und es funktioniert gut. Ich kann es stattdessen verwenden, um das Problem zu lösen, aber ich würde lieber herausfinden, was ich falsch mit dem UI-Bootstrap-Karussell mache.

Quelle

2016-05-02 Grant Jordan

Versuchen sein, Ihren Code zu ändern Spur von $ Index zu verwenden, statt Spur von slide.id und Schau, ob das hilft. –

@AlexChance Das hat es getan. Vielen Dank. Ich frage mich, warum meine ursprüngliche Methode nicht funktioniert, so wie es die Dokumentation tut. –

Es kann sein, dass Sie Ihre IDs formatieren. Ich debuggte den Code auf Ihrer Website und sah diese Zeile 'angle.xtend (q [s] .slide || {} .....' Wenn ich 's' inspizierte, enthielt es" 4 "und seit dem Array von Dias hat nur 4 Elemente, das letzte Element wäre [3], weshalb es den Fehler geworfen hat. Kann auch erklären, warum es die erste Folie nicht sofort zeigen würde, wenn es [0] erwartet hätte, und deine erste ID ist "1", was es zum 2. Element macht. –

Ich erhielt einen ähnlichen Fehler, es hieß: "TypeError: Kann Eigenschaft 'slide' von undefined nicht lesen".

Ich folgte einer der Kommentare hier und geändert:

index="slide.id"

für

index="$index"

Und das das Problem behoben. Ich bemerkte, dass das keine Antwort hatte, also wollte ich das einreichen.

Quelle

2016-07-31 19:50:56

Also im Grunde die 'slide.id' sollte habe von * 0 * (_zero_) angefangen, da sich das Attribut 'index' auf den _index des arrays_ bezieht. – Giraldi

danke yo Viel Sir –

das Problem ist in ids - die erste ID des Bildes 0 sein sollte, und Sie werden ganz gut

Quelle

2016-08-20 12:52:58 vvn050

UI bootstrap Karussell erste Folie zeigt nicht, dann stürzt auf letzte Folie

Antwort

Verwandte Themen