twitter-bootstrap AngularJS 多项目轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29927263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS multi-item carousel
提问by Belle
I'm using UI Bootstrap carousel, but it displays only one slide - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
How to display images this way?
我正在使用 UI Bootstrap carousel，但它只显示一张幻灯片 - 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
(like in the this carousel http://coolcarousels.frebsite.nl/c/58/)
（就像在这个旋转木马http://coolcarousels.frebsite.nl/c/58/ 中）
回答by Kathir
You can use the $index inside the ng-repeat to create additional images and add the next two images.
您可以使用 ng-repeat 中的 $index 创建其他图像并添加接下来的两个图像。
http://plnkr.co/edit/oVRYCfaMeRW5a54nzmem?p=preview
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>
Code to get the rotating images
获取旋转图像的代码
$scope.getSecondIndex = function(index)
{
if(index-slides.length>=0)
return index-slides.length;
else
return index;
}
回答by user8080009
I am using ng-repeat and converting to image,Here is my code but not converting
我正在使用 ng-repeat 并转换为图像，这是我的代码但未转换
<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>
