[Ionic2] 스크롤 가능한 이미지가 있는 카드 만들기

ionic 2.0 에서 카드와 스크롤러를 조합하면 이미지가 스크롤되는 카드를 쉽게 만들 수 있다.

이미지의 크기가 서로 다를 수 있음에 주의해야 하며, 코드에서는 ion-slide 태그에 height:auto 속성을 주어서 작은 이미지는 수직으로 중앙에 위치하도록 설정하였다.

첫번째 사진은 height:auto가 설정된 이미지
두번째는 설정하지 않았을 때
세번째는 풀사이즈

<ion-card> <ion-slides pager loop="true" autoplay="true"> <ion-slide style="height:auto"> <img src="img/1.jpg" /> </ion-slide> <ion-slide> <img src="img/2.jpg" /> </ion-slide> <ion-slide> <img src="img/3.jpg" /> </ion-slide> </ion-slides> <ion-card-content> <h2 class="card-title"> A card which contains scrollable image container. </h2> <p> You can scroll images left or right. </p> </ion-card-content> </ion-card>