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