Swiper 輪播查看器

版權聲明：本文首發 http://asing1elife.com ，轉載請註明出處。 https://blog.csdn.net/asing1elife/article/details/82892947

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