Sto provando a implementare il carosello ui-bootstraps ma quando la pagina viene caricata, la prima immagine non viene visualizzata, ma i controlli e gli indicatori.La prima diapositiva del bootstrap dell'interfaccia utente non viene visualizzata, quindi si blocca all'ultima diapositiva
Quindi, quando viene visualizzata la seconda immagine, posso usare i controlli per tornare alla prima immagine e verrà visualizzata correttamente. Posso usare i controlli per arrivare all'ultima diapositiva o lasciarla scorrere automaticamente ma quando arrivo all'ultima diapositiva la giostra smette di funzionare e restituisce l'errore "Impossibile leggere la proprietà 'diapositiva' di indefinito" che punta alla linea 576 dell'interfaccia utente -bootstrap-tpls.js.
Non sono sicuro di quello che sto facendo in modo errato in quanto sembra abbastanza semplice da implementare, ecco il mio codice e qui c'è un collegamento a un sito con un esempio di cosa sta succedendo.
View
<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'}
];
};
* Modifica
Ho provato il normale carosello di bootstrap e funziona perfettamente. Posso usarlo invece per risolvere il problema, ma preferirei capire cosa sto facendo male con il carosello ui-bootstrap.
tenta di modificare il codice per utilizzare pista per indice $, invece di pista da slide.id, e vedere se questo aiuterà. –
@AlexChance Questo ha funzionato. Grazie mille. Mi chiedo perché il mio metodo originale non funzioni in quanto è così che fa la documentazione. –
Potrebbe essere il modo in cui si stanno formattando i propri ID. Ho eseguito il debug del codice sul tuo sito e ho visto questa riga 'angular.extend (q [s] .slide || {} .....' Quando ho controllato 's', conteneva" 4 ", e dal momento che la matrice delle diapositive ha solo 4 elementi, l'ultimo elemento sarebbe [3], motivo per cui ha generato l'errore. Può anche spiegare perché non mostrerebbe immediatamente la prima diapositiva, se era prevista [0], e la prima L'ID è "1", diventando il secondo elemento. –