swiper的初步使用

1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上)

<link rel="stylesheet" href="path/to/swiper-3.4.0.min.css"><script src="path/to/jquery-1.10.1.min.js"></script><script src="path/to/swiper-3.4.0.jquery.min.js"></script>

2.HTML内容。<div class="swiper-container">   <div class="swiper-wrapper">     <div class="swiper-slide">Slide 1</div>     <div class="swiper-slide">Slide 2</div>     <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div></div> 导航等组件可以放在container之外

3.初始化swiper

<script>    var mySwiper = new Swiper (‘.swiper-container‘, {        loop: true,  //是否自动轮播        autoplay: 2200,  //轮播间隔时间

// 如果需要分页器        pagination: ‘.swiper-pagination‘,  //设置分页器        paginationClickable :true,         //点击是否可以跳转分页        // 如果需要前进后退按钮//        nextButton: ‘.swiper-button-next‘,//        prevButton: ‘.swiper-button-prev‘,    })</script>

4.css样式设置.swiper-container {　　 width: 600px; height: 300px; } //轮播框架大小可以自定义分页样式,你要更改样式可以通过调试工具点击页面,从html中找到类名,在swiper.css中ctrl+f找到设置样式