Bootstrap旋轉木馬和縮略圖圖像一起工作

我成功沒有問題地在它的標準形式中啓動旋轉木馬。現在，我想使用旋轉木馬下方的縮略圖來選擇並強制顯示我想要看到的圖像。此功能位於傳送帶內已有的功能之上。理想情況下，我希望我也可以在縮略圖上使用「活動」類，以突出顯示旋轉木馬上顯示的縮略圖。如果有人可以幫我做下一步。非常感謝彼得Bootstrap旋轉木馬和縮略圖圖像一起工作

<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>

來源

2014-02-10 Peter HIRT

你已經找到一種方法來使用縮略圖？我正在嘗試做同樣的事情。 – kiriz

使用納克級的位置是這樣的：

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

來源

2014-02-10 21:27:37 koolunix

Bootstrap旋轉木馬和縮略圖圖像一起工作

回答

相關問題