Swiper 轮播查看器

Swiper 可以实现类似于相册图片查看的功能

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

官网

1. Swiper
2. Swiper-中文

API

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

编写插件所需的基本布局

1. 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") });