如何在ionic中使用swiper

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

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="/assets/css/swiper.min.css">

<!-- Swiper JS -->
<script src="/assets/js/swiper.min.js"></script>

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

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="/assets/imgs/banner1.png">
        <img src="/assets/imgs/banner2.png">
      </div>
    </div>
  </div>
  
.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
});