-1

저는 AngularJS를 사용하여 부트 스트랩 슬라이더를 생성하려고합니다. 내 컨베이어 벨트가 작동하지 않는 이유를 모르겠습니다. 여기이미지 슬라이더가 부트 스트랩에서 작동하지 않습니다.

<div class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active" ng-repeat="slide in images" > 
     <img ng-src="{{slide.image}}" alt="" width="460" height="345"> 
    </div> 
    </div> 
</div>

또한 그것은 당신이 HTML에서, 그래서 부트 스트랩을 사용하는 것 같습니다 plunker about the problem

출처

2016-09-08 Gururaj Moger

당신은 UIB의 문서를 따랐다하지 않는 것. 마크 업은 부트 스트랩과 동일하지 않습니다. https://angular-ui.github.io/bootstrap/#/carousel – isherwood

입니다 : 여기 내 HTML의 당신이 ng-repeat를 사용하는 경우

<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.min.js"></script> 
</head>

이 class에서 단어 "활성화"를 삭제하고 class="item active"과 함께 하나의 이미지 추가 :

<div class="item active"> 
    <img src="http://lorempixel.com/400/200/food" width="460" height="345"> 
</div> 

<div class="item" ng-repeat="slide in images"> 
    <img ng-src="{{slide.image}}" width="460" height="345"> 
</div>

부트 스트랩이 없으면 이미지를 숨 깁니다.

는의 일부 CSS를 추가하자 : HTML에서

.sliderImg 
{ 
    position: relative; 
    width:100%; 
    display: inline-block; 
} 

.imgWrap 
{ 
    height: 460px; 
} 

.slider 
{ 
    position: absolute; 
    overflow: hidden; 
    width: 100%; 
}

클래스를 추가

<div class="slider" ng-repeat="slide in images"> 
     <div class="imgWrap"> 
     <img class="sliderImg" ng-src="{{slide.image}}" alt="" width="460" height="345"> 
     </div> 
</div>

출처

2016-09-08 19:47:40

이미지 슬라이더가 부트 스트랩에서 작동하지 않습니다.

답변

부트 스트랩이 없으면 이미지를 숨 깁니다.

관련 문제