Question

我成功地没有问题以标准形式发射旋转木马。现在，我想使用旋转木马下方的缩略图来选择并强制我想要看到的图像。此功能已基于旋转木马中存在的内容。理想情况下，我希望还有一个“活动”类，我可以在缩略图上使用它来突出显示我目前在旋转木马上显示的缩略图。如果有人可以帮助我完成下一步。非常感谢彼得

<html ng-app="myApp">
<head>
<title>Bootstrap tests</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container" ng-controller="Ctrl">
    <h1>test Carousel</h1>
    <div class="row">               
                <div >
                    <carousel interval="myInterval">
                      <slide ng-repeat="image in images" active="image.active">
                        <img ng-src="{{image.image}}" >
                        <div class="carousel-caption">
                          <p>{{image.text}}</p>
                        </div>
                      </slide>
                    </carousel>
                </div>

    <div class="clearfix"></div>

    <div class="row" style="background-color:sienna">   
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" ng-repeat="image in images"  ng-click="select(slide)">
            <div class="thumbnail">
                <img src="{{image.thumbnail}}">
            </div>
        </div>
    </div<  
</div>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript"              src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-custom-tpls-0.10.0.min.js"></script>
<script type="text/javascript" src="js/servicesGetImages.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Answer 1

在这里使用ng-class：

<slide ng-repeat="image in images" ng-class="{ active : 'image.active'}">

Bootstrap Carousel和缩略图一起工作

1 个答案: