版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82892947
Swiper 可以实现类似于相册图片查看的功能
更多精彩
- 更多技术博客，请移步 asing1elife’s blog
官网
API
引入插件所需 css/js 文件
<link href="path/to/swiper.min.css" rel="stylesheet">
<script src="path/to/swiper.min.js" type="text/javascript"></script>
<script src="path/to/jquery.js" type="text/javascript"></script>
编写插件所需的基本布局
- swiper-pagination 、swiper-button-prev 、swiper-button-next 、swiper-scrollbar 都是可选的
<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>
调用初始化方法
var itemSwiper = f7.swiper(".swiper-container", {
speed: 400,
spaceBetween: 100,
prevButton: $recruitContentPanel.find(".prev-btn"),
nextButton: $recruitContentPanel.find(".next-btn")
});
