부트 스트랩 회전식 캐 러셀 및 미리보기 이미지가 함께 작동합니다

캐 러셀을 표준 형식으로 시작하는 데 문제없이 성공했습니다. 이제는 회전 장치 아래에있는 미리보기 이미지를 사용하여 내가보고 싶은 이미지를 선택하고 강제로 사용하고 싶습니다. 이 기능은 이미 컨베이어 내부에 존재합니다. 이상적으로는 "활성"클래스를 사용하여 미리보기에서 현재 내가 사용중인 미리보기 이미지를 회전식 슬라이드 쇼에 표시 할 수 있습니다. 누군가 다음 단계로 나를 도울 수 있다면. 덕분에 많은 여기에서이 같은 피터부트 스트랩 회전식 캐 러셀 및 미리보기 이미지가 함께 작동합니다

<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

사용 NG 급 :

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

출처

2014-02-10 21:27:37 koolunix

부트 스트랩 회전식 캐 러셀 및 미리보기 이미지가 함께 작동합니다

답변

관련 문제