Question

我正在尝试在我的Bootstrap 3网站上添加一个轮播。但是，所有图像都会立刻显示出来。我从这里引用w3schools。有什么建议吗？

<div class="container" ng-show="hasImages">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators" ng-repeat="image in images">
            <li data-target="#myCarousel" data-slide-to="$index" class="$index  == 0 ? 'active' : ''"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" ng-repeat="image in images">
            <div class="$index  == 0 ? 'item active' : 'item'">
                <img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
                <div class="carousel-caption">
                    <h3>{{image.name}}</h3>
                    <p>{{image.description}}</p>
                </div>
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

这有什么问题吗？ class="$index == 0 ? 'active' : ''"

注意：我使用的是版本3.3.5的bootstrap.min.js, bootstrap.min.css和版本1.11.3的jquery.min.js。

编辑1 ：我也试过这个（http://angular-ui.github.io/bootstrap/#/carousel），我还面临同样的问题。所有图像都会立即显示。

<div style="height: 305px">
    <uib-carousel interval="5000" no-wrap="false">
        <uib-slide ng-repeat="subCategorySlideShowImage in subCategorySlideShowImages" active="subCategorySlideShowImage.active">
            <img ng-src="{{subCategorySlideShowImage.fullPath}}" style="margin:auto;">
            <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{subCategorySlideShowImage.text}}</p>
            </div>
        </uib-slide>
    </uib-carousel>
</div>

Answer 1

您可以使用ng-class根据$ index的值动态设置CSS类，并根据需要设置类。

<div class="container" ng-show="hasImages">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators" ng-repeat="image in images">
            <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" ng-repeat="image in images">
            <div class="item" ng-class="{'active': $index == 0}">
                <img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
                <div class="carousel-caption">
                    <h3>{{image.name}}</h3>
                    <p>{{image.description}}</p>
                </div>
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

当我使用ng-repeat

1 个答案: