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>    

二：自定义控制按钮（用按钮控制轮播图切换）

1:定义轮播图

    <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>

2:在js中初始化轮播图，并指定控制按钮

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

原文地址：https://www.cnblogs.com/ygj0930/p/8459713.html