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找到设置样式上面所讲的是swiper最新版本3;但是在pc端可能要兼容更多的浏览器,甚至ie7,8那么需要用老版本swiper2.swiper2下载地址:http://2.swiper.com.cn/download/index.html在2中分页器的class名字有所改变,2中叫pagination,但3中叫swiper-pagination,在改样式和设置分页器的时候要注意了.转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/6196465.html
相关资源：JAVA上百实例源码以及开源项目