bootstrap carousel Ng 重复中的四个项目? [英] Four items in bootstrap carousel Ng repeat?

问题描述

我想在一张幻灯片中显示四个项目.但是我如何在主行中重复它，因为它使用活动幻灯片的活动类.这是我的 HTML 的样子.

<div class="carousel-inner"><div class="item active"><div class="row"><div class="col-xs-3" ng-repeat="图像中的图像"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

还有一个 JSON 示例.

$scope.images = ["http://placehold.it/500/e499e4/fff&text=1","http://placehold.it/500/e499e4/fff&text=2","http://placehold.it/500/e499e4/fff&text=3","http://placehold.it/500/e499e4/fff&text=4","http://placehold.it/500/e499e4/fff&text=5","http://placehold.it/500/e499e4/fff&text=6","http://placehold.it/500/e499e4/fff&text=7",]

解决方案

一种方法是将数组分成块...

<div class="row"><div class="col-xs-3" ng-repeat="images.slice(0,4) 中的图像"><a href="#"><img ng-src="{{图像}}" class="img-responsive"></a></div>

<div class="item"><div class="row"><div class="col-xs-3" ng-repeat="images.slice(5,9) 中的图像"><a href="#"><img ng-src="{{图像}}" class="img-responsive"></a></div>