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