如何在ionic中使用swiper

1.在入口页index.html引入文件

2.在组件文件嵌入轮播图结构和样式；

  

    

      

        
        
      
    
  
  
.swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

3.在组件ts文件最上面声明declare let Swiper: any;
这里有一个问题，从后台获取图片后，轮播图会默然显示最后一张，但我们需要的是从第一张开始，所以在获取数据后做一下初始化

let mySwiper = new Swiper('.swiper-container',{
  observer:true,//修改swiper自己或子元素时，自动初始化swiper
  observeParents:true,//修改swiper的父元素时，自动初始化swiper
});