AngularJS에서 carousel 적용하기

출처 : http://gorani7.tistory.com/4

carousel slide를 쓸려고 하면 angularjs에서는 제대로 되지 않는다.

그 이유는 angularjs 내의 animate와 충돌을 하기 때문이라고 한다.

해결책은 아래와 같다.

<a  class="left carousel-control" href="#mycarousel" data-slide="prev" target="_self" ng-non-bindable="">

        <span class="icon-next"></span>

</a>

<a class="right carousel-control" href="#mycarousel" data-slide="next"  target="_self" ng-non-bindable="">

        <span class="icon-prev"></span>

</a>

ng-non-bindable은 angular가 a tag에서 bind하지 않고 compile skip하라는 컨트롤 이라고 한다.

target="_self" 

ng-non-bindable=""

위의 두가지를 다 써야 컴파일 에러가 멈췄다고 한다.

한가지씩은 안써봐서 잘 모르겠지만 2개 함께 썼을 때에는 잘 작동했다.

bootstrap UI까지 쓸 필요 없이 간단히 특정 이미지들만 올린다면 이것도 괜찮은 방법 같다.

==============================================================================================================

carousel내에서 이미지 가운데 맞춤

img 태그에 margin-left, right를 auto로 준다.

carousel내의 이미지 비율 조정

img 태그 내에서 height이나 width를 만진다.

둘중 하나 비율로 주고 마찬가지로 max-... px로 주어서 일정크기 이상은 커지지 않도록 만든다.

img{

    margin-left: auto;

    margin-right:auto;

    max-height:600px;

    height:100%;

}