Ionic slides 輪播圖

1. 建立界面css

<ion-content>
  <ion-slides pager class="myslides">
    <ion-slide>
      <img src="assets/images/slide01.png" />
    </ion-slide>
    <ion-slide>
      <img src="assets/images/slide02.png" />
    </ion-slide>
    <ion-slide>
      <img src="assets/images/slide03.jpg" />
    </ion-slide>
  </ion-slides>
</ion-content>

  

2. 建立樣式html

page-my-slides {
 .myslides{
   height:150px;
   width: 100%;
    ion-slide{
      height:150px;
      width: 100%;

      img{
        height:150px;
        width: 100%;
      }
    }
 }
}

  這樣輪播圖就會顯示在頂部了。ide

相關文章
相關標籤/搜索