涨芝士：swiper在原生H5中的灵活运用

如何引入swiper

<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>

<div class="swiper-container" id="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="home">
        <img src="assets/img/food.png"  alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="home">
        <img src="assets/img/home.png"  alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="home">
        <img src="assets/img/tree.png"  alt="">
      </div>
    </div>
  </div>
</div>
<div class="up" id="up">
	// 一个可以向下滑动的指示图标👇
</div>

let upClick = document.getElementById('up')
let mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical', // 垂直轮播
  // freeMode: true, // 翻页位置在任意位置停止。不再限制在页面当中
  pagination: {
    el: '.swiper-pagination',
    // clickable: true, // 点击分页按钮，也可以切换图片
    paginationHide: false,
    observer:true, //修改swiper自己或子元素时，自动初始化swiper    重要
    observeParents:true, //修改swiper的父元素时，自动初始化swiper  重要
  },
  on: {
    slideChange: function (event) {
      if(mySwiper.activeIndex === 2){
        upClick.style.display = 'none'
      }else {
        upClick.style.display = 'block'
      }
    }
  }
})
upClick.onclick =  function() {
  mySwiper.slideNext() // 下一张
  if(mySwiper.isEnd){
    upClick.style.display = 'none'
  }
}