輪播搞不定怎麼辦?來看SWIPER教學分享吧!

0
67

開發時候,不知道如何搞定輪播問題怎麼辦?

這邊跟大家推薦swiper,功能性非常齊全的輪播套件(在切版時期陪我渡過很多難關 ..)

那目前對岸也已經翻譯完成,介紹的還滿詳細的,但要使用套件之前,我們先來看看它能給我們什麼樣的效果,

詳細可看:http://www.swiper.com.cn/demo/index.html

那這邊先挑4種常看到的,swiper都能呈現:

1.水平輪播

1

2.垂直輪播

2

3.分組輪播

3

4.無限輪播

4

基本客戶常見的效果要求,大部分都環繞在這4種上,些許不同的再從中改CSS也能達到效果。

 

那接下來進入正題,如何使用?

這邊順著下面步驟做,就能一起簡單使用swiper囉:

1.先下載swiper文檔(沒這個就不用搞了)

上連結:http://www.swiper.com.cn/download/index.html

2016-09-27_101213

或者你不想辦百度雲帳號,那也可以直接由官網下載:

http://idangero.us/swiper/#.V-nWfyh97IU

解壓縮後,裡面有個dist資料夾,swiper的css和js放在裡面,再把他們引用就對了

123

2.載入套件(JQ記得引用進來)

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

3. HTML內容引用

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

(P.S上面的silde 1 . 2. 3 .. ,可以改輸入你想要的內容,可放文字or圖片)

4.看要不要給swiper訂寬高(看個人)

.swiper-container {
    width: 600px;
    height: 300px;
}

5.初始化Swiper:最好是緊接著</body>標籤

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    
    // 如果需要分頁器
    pagination: '.swiper-pagination',
    
    // 如果需要前進後退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滾動條
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</body>

恭喜你,做到這邊應該可以呈現輪播效果了吧,

就是上面5步驟就可以使用了,到目前為止應該還算可以吧?

簡單來說就是記得,載入套件 -> 寫HTML -> 使用JS初始化。

這邊也偷偷告訴大家,swiper同步支援拖拉模式,簡單說就是在手機上,不用點擊左右箭頭也能切換圖片,

如何切換呢?就用手指頭拖動直接就可以換圖了,是不是很棒呢?

 

今天這篇先教大家如何先把特效實踐出來,

但可別以為swiper就只有這樣而已唷,

這只是他的其中一部份,他可以做的還很多呢!

接下來會再出swiper相關應用文章,

也請大家留言或按讚給我點支持,謝謝大家^^

 

本文章所屬frankbite,未經授權,不得轉載!如需轉載,煩請通知。

如果你喜歡我們的文章,請 Follow 我們的 Facebook 專頁,會分享許多很棒的文章唷!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03