引导轮播中的四个项目 Ng 重复？

Posted 2023-05-09

【中文标题】引导轮播中的四个项目 Ng 重复？

【英文标题】：Four items in bootstrap carousel Ng repeat?

【发布时间】：2017-08-20 14:53:33

【问题描述】：

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

<div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
                    <div class="col-xs-3" ng-repeat="image in images"><a href="#"><img ng-src="image" class="img-responsive"></a></div>
                </div>
            </div>
        </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>
    </div>

还有一个 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",
]

【参考方案1】：

你可以做的一种方法是将数组分成块......

<div class="item active">
    <div class="row">
        <div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><a href="#"><img ng-src="image" class="img-responsive"></a></div>
    </div>
</div>
<div class="item">
    <div class="row">
        <div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><a href="#"><img ng-src="image" class="img-responsive"></a></div>
    </div>
</div>

Demo

【讨论】：

谢谢。但是，当应该显示活动 div 时，如何移动“活动”类呢？

什么意思？由于您有一个多项目轮播，因此具有 4 列的项目处于活动状态。查看演示。

这里 重复了两次，但我必须动态修复该计数我该怎么做