Framework7学习笔记之 幻灯片(轮播图)

<div class="swiper-container swiper-init" data-speed="轮播速度" data-pagination=".swiper-pagination">
    <div class="swiper-wrapper">
        <div class="swiper-slide">轮播页面内容</div>
        <div class="swiper-slide">轮播页面内容</div>
        <div class="swiper-slide">轮播页面内容</div>
        ... other slides ...
    </div>
    <div class="swiper-pagination"></div>//这是轮播图页码下标，根据轮播页面数自动生成、自动跟随页面切换而变换
</div>    

    <div class="swiper-container">
      <div class="swiper-pagination"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide">轮播页面</div>
        <div class="swiper-slide">轮播页面</div>
        <div class="swiper-slide">轮播页面</div>
        ....
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

var mySwiper = myApp.swiper(‘.swiper-container‘, {
  pagination: ‘.swiper-pagination‘,
  paginationHide: false,
  paginationClickable: true,
  nextButton: ‘.swiper-button-next‘,
  prevButton: ‘.swiper-button-prev‘,
});