Sto usando il carosello UI Bootstrap, ma visualizza solo una diapositiva - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
Come visualizzare le immagini in questo modo?
AngularJS multi-item carousel
img1 - img2 - img3
then
img2 - img3 - img4
then
img3 -img4 - img5
then
img4 - img5 - img6
then
img5 - img6 - img1
(come nel carosello questo http://coolcarousels.frebsite.nl/c/58/)
È possibile utilizzare l'indice $ all'interno della ng-repeat per creare immagini aggiuntive e aggiungere le prossime due immagini.
http://plnkr.co/edit/oVRYCfaMeRW5a54nzmem?p=preview
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<div class="" style="width:600px;margin:auto;">
<div >
<img ng-src="{{slide.image}}" width="200px" style="float:left;">
</div>
<div >
<img ng-src="{{slides[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" >
</div>
<div >
<img ng-src="{{slides[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" >
</div>
</div>
</slide>
</carousel>
codice per ottenere le immagini rotanti
$scope.getSecondIndex = function(index)
{
if(index-slides.length>=0)
return index-slides.length;
else
return index;
}
Sto usando ng-repeat e la conversione di immagini, Ecco il mio codice, ma non la conversione
<carousel interval="myInterval">
<slide ng-repeat="rc in RequirementConsultanctDetails" active="slide.active">
<div class="" style="width:600px;margin:auto;" ng-show="rc.photo!=null">
<div>
<img ng-src="data:image/jpeg;base64,{{rc.photo}}" width="200px" style="float:left;">
</div>
<div>
<img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+1)].photo}}" width="200px" style="float:left;">
</div>
<div>
<img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+2)].photo}}" width="200px" style="float:left;">
</div>
</div>
</slide>
</carousel>
Questa è una risposta o una domanda? – Pang
I l'ho già provato Il problema è che {{slide [$ index + 1] .image}} e {{slide [$ index + 2] .image}} sono vuoti alla fine del cursore. Ad esempio, se ho 4 immagini in $ scope.slides, le visualizzerò in questo modo: img1 -img2 - img3 e quindi img4 - vuoto - vuoto. Ma voglio che mostri img1 - img2 - img3, quindi img4 - img1 - img2, quindi img1 - img2 - img3 e così via. – Belle
Ho aggiornato il codice per ruotare le immagini. – Kathir
Grazie, funziona. Ma è ancora un po 'diverso da quello che voglio. È possibile farlo visualizzare immagini come in questo slider http://coolcarousels.frebsite.nl/c/58/? – Belle