我使用UI Bootstrap转盘,但它只显示一个幻灯片 –
http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
如何以这种方式显示图像?
如何以这种方式显示图像?
img1 - img2 - img3 then img2 - img3 - img4 then img3 -img4 - img5 then img4 - img5 - img6 then img5 - img6 - img1
(如这个旋转木马http://coolcarousels.frebsite.nl/c/58/)
解决方法
您可以使用ng-repeat内的$index创建其他图像并添加下两个图像.
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>
代码获取旋转图像
$scope.getSecondindex = function(index)
{
if(index-slides.length>=0)
return index-slides.length;
else
return index;
}