2019/3/3 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

⾏銷！就⽤中文網址輔助 前進吧！成為更好的⾃⼰ 全臺規模最⼤資訊安全展會

技術問答 (https://ithelp.ithome.com.tw/questions) 技術文章 (https://ithelp.ithome.com.tw/articles?tab=tech)
(https://adcl.pchome.com.tw/clickAd2.html? (https://adcl.pchome.com.tw/clickAd2.html? (https://adcl.pchome.com.tw/clickAd2.html?
q=0~ithome_forum~197127) q=23~ithome_forum~968824) q=1~ithome_forum~1221683)
登入/註冊 (https://ithelp.ithome.com.tw/users/login)

(/)
(https://adcl.pchome.com.tw/clickAd2.html?q=3~ithome_forum~1221687)

0
讚

a
2018 iT 邦幫忙鐵⼈賽 2019 iT 邦幫忙鐵⼈賽 
(https://ithelp.ithome.com.tw/2018ironman)
b (https://ithelp.ithome.com.tw/iron
c sc=iThelpR)
 Modern Web (https://ithelp.ithome.com.tw/2018ironman/web)

30天學習30套前端技術(2018年) 累計文章數 參賽組數

0
(https://ithelp.ithome.com.tw/users/20091292/ironman/1595)系列 第 50 篇 9283 篇 523 組
 (https://ithelp.ithome.com.tw/users/login)
[⼗分鐘學習] Swiper - 最新潮的幻燈片/跑 完賽⼈數 團體組數

264 ⼈ 21 組
⾺燈效果
2018鐵⼈賽
鐵⼈賽最新文章
(https://ithelp.ithome.com.tw/tags/articles/2018%E9%90%B5%E4%BA%BA%E8%B3%BD)
活動宣傳─2019.03.14資安攻防演練主題
javascript (https://ithelp.ithome.com.tw/tags/articles/javascript)
講座
css (https://ithelp.ithome.com.tw/tags/articles/css) (https://ithelp.ithome.com.tw/articles/102
11070?sc=iThelpR)

mfhsueh (https://ithelp.ithome.com.tw/users/20091292/ironman) 存取控制

2018-02-07 10:58:01 (https://ithelp.ithome.com.tw/articles/102
18645 瀏覽 10880?sc=iThelpR)
(https://ithelp.ithome.com.tw/users/20091292/ironman) 遇到惱⼈的訂閱中帳單管理與發票⾃動寄
送通知反⽩異常問題
example1 (https://ithelp.ithome.com.tw/articles/102
10808?sc=iThelpR)
[114/150]離散數學(⼆三)⼆元運算-4(完)
Swiper是時下完整的幻燈片/跑⾺燈套件，使⽤效能⾼，並可運⽤在⾏動裝 (https://ithelp.ithome.com.tw/articles/102
置上及混和式App上，不但在最新版本的iOS上運作很好，在Android、 10766?sc=iThelpR)
編譯與執⾏Hello!World!
Windows Phone 8和桌上型裝置上⼀樣虎虎⽣風；要注意的是，Swiper並
(https://ithelp.ithome.com.tw/articles/102
不相容所有平台裝置，⽽是專注於時下主流平台裝置的相容性和效能上； 10759?sc=iThelpR)
同時Swiper也是Framework7 (http://framework7.io/)和Ionic Framework 萬年Hello World!!!
(https://ithelp.ithome.com.tw/articles/102
(http://ionicframework.com/)的組件⼀部分。
10756?sc=iThelpR)
JAVA-環境設置
(https://ithelp.ithome.com.tw/articles/102
GitHub Star: 15,000
10754?sc=iThelpR)
Javascripting Overall: 93%
[113/150]離散數學(⼆⼆)⼆元運算-3
瀏覽器: Chrome、Firefox和IE10+ (https://ithelp.ithome.com.tw/articles/102
RWD: ⽀援 10750?sc=iThelpR)

License: MIT [112/150]離散數學(⼆⼀)⼆元運算-2

(https://ithelp.ithome.com.tw/articles/102
(https://github.com/nolimits4web/swiper/blob/master/LICENSE)
10740?sc=iThelpR)
[111/150]離散數學(⼆⼗)⼆元運算-1
(https://ithelp.ithome.com.tw/articles/102
10730?sc=iThelpR)
《安裝》  前往鐵⼈賽
(https://ithelp.ithome.com.tw/ironman?
CDN sc=iThelpR)

熱⾨問題

有沒有vba⾼⼿能幫我製作⼀下excel功能
(https://ithelp.ithome.com.tw/questions/1

https://ithelp.ithome.com.tw/articles/10197850 1/6
2019/3/3 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
0192705)
技術問答 (https://ithelp.ithome.com.tw/questions)
<!-- Swiper v4.1.0 -->
技術文章 (https://ithelp.ithome.com.tw/articles?tab=tech)
網路輸送品質很差，速度慢到讓我抓狂，
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/ 是否該把MPLS專線換成SD-WAN使⽤呢?
4.1.0/css/swiper.css" rel="stylesheet" /> 登入/註冊 (https://ithelp.ithome.com.tw/users/login)
(https://ithelp.ithome.com.tw/questions/1
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/ 0192722)
4.1.0/css/swiper.min.css" rel="stylesheet" />
職涯規劃，請各位⼤⼤幫助⼩弟(軟體⼯程
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/
師請進)!!
4.1.0/js/swiper.js"></script>
(https://ithelp.ithome.com.tw/questions/1
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/
0192718)
4.1.0/js/swiper.min.js"></script>
中⼩企業的應戰
0
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/
(https://ithelp.ithome.com.tw/questions/1
讚 4.1.0/js/swiper.esm.js"></script>
0192698)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/
4.1.0/js/swiper.esm.bundle.js"></script> 公司內部某個E-Mail帳號無法寄送外部郵
a 件
(https://ithelp.ithome.com.tw/questions/1
b
0192715)
npm (https://www.npmjs.com/)
c 內部DNS Server無法解析問題
(https://ithelp.ithome.com.tw/questions/1
$ npm install swiper 0192691)
HTML / CSS 版⾯問題
(https://ithelp.ithome.com.tw/questions/1
0192716)
Bower (https://bower.io/)
RDP WRAP 是否合法?
(https://ithelp.ithome.com.tw/questions/1
$ bower install swiper 0192713)
Window ⾃動鏡像複製 能做到嗎
(https://ithelp.ithome.com.tw/questions/1
0192694)
Meteor (https://www.meteor.com/)
IIS 繫結設定，單IP 多網站設定
(https://ithelp.ithome.com.tw/questions/1
$ meteor add nolimits4web:swiper 0192689)

《範例》
包含捲軸、分⾴和上下按鈕的幻燈片 (https://jsbin.com/qokakoj/edit?
html,output)

example1

(https://adcl.pchome.com.tw/clickAd2.html?
q=47~ithome_forum~1238942)

．Agile Summit 2019 演講、⼯作坊⼤募集 

(https://adcl.pchome.com.tw/clickAd2.html?
q=2~ithome_forum~1238939)
．擴⼤⾸辦臺灣資安週，2019 臺灣資安⼤會
3/19 ~ 3/21 強⼒登場！ 
(https://adcl.pchome.com.tw/clickAd2.html?
q=2~ithome_forum~1221691)
．DevOpsDays國際舞台再次登錄台北 
(https://adcl.pchome.com.tw/clickAd2.html?
q=2~ithome_forum~1238943)
．【年後加碼職場競爭⼒】立即報名臺灣資安
⼤會—斜槓資安特訓班、資安診療室、重磅⼤
師演說，即刻加入職場勝利組！ 
(https://adcl.pchome.com.tw/clickAd2.html?
q=2~ithome_forum~1236214)

https://ithelp.ithome.com.tw/articles/10197850 2/6
2019/3/3 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

幻燈片內容
技術問答 (https://ithelp.ithome.com.tw/questions)
<!-- -->
技術文章 (https://ithelp.ithome.com.tw/articles?tab=tech)IT邦幫忙
IT邦幫忙
6,488 按讚次數
<div class="swiper-container">
<!-- 外層(必要) --> 登入/註冊 (https://ithelp.ithome.com.tw/users/login)
<div class="swiper-wrapper">
<!-- 幻燈片內容 -->
說這專頁讚 觀賞影片
<div class="swiper-slide"><img src="https://6666desig
成為朋友中第一個說這讚的人
n.com/pic/it2018/example/1@320x200.jpg"></div>
<div class="swiper-slide"><img src="https://6666desig
n.com/pic/it2018/example/2@320x200.jpg"></div>
<div class="swiper-slide"><img src="https://6666desig 站⽅公告
0
讚 n.com/pic/it2018/example/3@320x200.jpg"></div>
【2019 iT邦幫忙鐵⼈賽】得獎名單
<div class="swiper-slide"><img src="https://6666desig
n.com/pic/it2018/example/4@320x200.jpg"></div> (https://ithelp.ithome.com.tw/announces/
a <div class="swiper-slide"><img src="https://6666desig 36)
n.com/pic/it2018/example/5@320x200.jpg"></div>
b </div>

c <!-- 分頁 非必要
( ) --> 熱⾨tag
<div class="swiper-pagination"></div> 看更多  (https://ithelp.ithome.com.tw/tags)

<!-- 上 下一頁按鈕 非必要

/ ( ) -->
鐵⼈賽
(https://ithelp.ithome.com.tw/tags/questions/%E
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
2019鐵⼈賽

<!-- 捲軸 非必要
( ) -->
(https://ithelp.ithome.com.tw/tags/questions/20

<div class="swiper-scrollbar"></div> 2018鐵⼈賽

</div>
(https://ithelp.ithome.com.tw/tags/questions/20
<style>
.swiper-container { 2017鐵⼈賽
/* 設定幻燈片寬度跟高度 */ (https://ithelp.ithome.com.tw/tags/questions/20
width: 320px;
height: 200px; windows
} (https://ithelp.ithome.com.tw/tags/questions/wi
</style>
<script> windows server
var mySwiper = new Swiper ( ".swiper-container", { (https://ithelp.ithome.com.tw/tags/questions/wi
// 參數設定 註
[ 1]
direction: "vertical", // 方向 javascript
loop: true, // 循環 (https://ithelp.ithome.com.tw/tags/questions/jav
pagination: {
el: ".swiper-pagination", // 分頁物件 linux
(https://ithelp.ithome.com.tw/tags/questions/lin
},
navigation: {
nextEl: ".swiper-button-next", // 上一頁按鈕物件 php

prevEl: ".swiper-button-prev", // 下一頁按鈕物件 (https://ithelp.ithome.com.tw/tags/questions/ph

}, 程式設計
scrollbar: {
el: ".swiper-scrollbar", // 捲軸物件 (https://ithelp.ithome.com.tw/tags/questions/%E

} 分享
}) (https://ithelp.ithome.com.tw/tags/questions/%E
</script>
資訊安全
(https://ithelp.ithome.com.tw/tags/questions/%E

[註1] 職場
(https://ithelp.ithome.com.tw/tags/questions/%E
參數 描述
專案管理
(https://ithelp.ithome.com.tw/tags/questions/%E

⼯作
direction ⽅向 (https://ithelp.ithome.com.tw/tags/questions/%E

loop 循環 伺服器
(https://ithelp.ithome.com.tw/tags/questions/%E

pagination.el 分⾴物件
網⾴設計
(https://ithelp.ithome.com.tw/tags/questions/%E
navigation.nextEl 上⼀⾴按鈕物件
sql
navigation.prevEl 下⼀⾴按鈕物件 (https://ithelp.ithome.com.tw/tags/questions/sql

scrollbar.el 捲軸物件

https://ithelp.ithome.com.tw/articles/10197850 3/6
2019/3/3 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3D轉動的幻燈片 (https://jsbin.com/rokatuy/edit?html,output) c#
技術問答 (https://ithelp.ithome.com.tw/questions) 技術文章 (https://ithelp.ithome.com.tw/articles?tab=tech)
(https://ithelp.ithome.com.tw/tags/questions/c%

<!-- 幻燈片內容 --> 登入/註冊 (https://ithelp.ithome.com.tw/users/login)

mysql
<div class="swiper-container"> (https://ithelp.ithome.com.tw/tags/questions/my
<!-- 外層 必要( ) -->
<div class="swiper-wrapper">
幻燈片內容
<!-- --> 熱⾨回答
<div class="swiper-slide"><img src="https://6666desig
n.com/pic/it2018/example/1@320x200.jpg"></div> 網路輸送品質很差，速度慢到讓我抓狂，
<div class="swiper-slide"><img src="https://6666desig 是否該把MPLS專線換成SD-WAN使⽤呢?
0
讚 n.com/pic/it2018/example/2@320x200.jpg"></div> (https://ithelp.ithome.com.tw/questions/1
<div class="swiper-slide"><img src="https://6666desig 0192722)
n.com/pic/it2018/example/3@320x200.jpg"></div> 職涯規劃，請各位⼤⼤幫助⼩弟(軟體⼯程
a <div class="swiper-slide"><img src="https://6666desig
師請進)!!
n.com/pic/it2018/example/4@320x200.jpg"></div>
b <div class="swiper-slide"><img src="https://6666desig
(https://ithelp.ithome.com.tw/questions/1
0192718)
n.com/pic/it2018/example/5@320x200.jpg"></div>
c IIS 繫結設定，單IP 多網站設定
</div>
<!-- 上 下一頁按鈕 非必要
/ ( ) --> (https://ithelp.ithome.com.tw/questions/1

<div class="swiper-button-prev"></div> 0192689)

<div class="swiper-button-next"></div> 內部DNS Server無法解析問題
</div> (https://ithelp.ithome.com.tw/questions/1
<style> 0192691)
.swiper-container { 中⼩企業的應戰
/* 設定幻燈片的寬度跟高度 */ (https://ithelp.ithome.com.tw/questions/1
width: 320px; 0192698)
height: 200px; [EFNET] 有關TIPTOP整合時，附件無法打
}
開的問題。
</style>
(https://ithelp.ithome.com.tw/questions/1
<script>
0192701)
var mySwiper = new Swiper ( ".swiper-container", {
// 參數設定 註 [ 1]
C# 字串轉⽇期

effect: "cube", // 效果 (https://ithelp.ithome.com.tw/questions/1

grabCursor: true, // 游標為手掌 0192708)

cubeEffect: { RDP WRAP 是否合法?
shadow: true, //顯示陰影 (https://ithelp.ithome.com.tw/questions/1
當滑動時，則顯示動陰影
slideShadows: true, // 0192713)
陰影偏移
shadowOffset: 20, // 公司內部某個E-Mail帳號無法寄送外部郵
陰影比例
shadowScale: 0.94, // 件
}, (https://ithelp.ithome.com.tw/questions/1
navigation: { 0192715)
nextEl: ".swiper-button-next", // 上一頁按鈕物件
prevEl: ".swiper-button-prev", // 下一頁按鈕物件 Router AP DHCP, NAT 轉換成 Windows
Server代發問題
}
(https://ithelp.ithome.com.tw/questions/1
})
0192690)
</script>

[註1]

參數 描述

effect 效果

grabCursor 游標為⼿掌

cubeEffect.shadow 顯⽰陰影

cubeEffect.slideShadows 當滑動時，則顯⽰動陰影 (https://adcl.pchome.com.tw/clickAd2.html?

q=9~ithome_forum~1221689)
cubeEffect.shadowOffset 陰影偏移
熱⾨文章
cubeEffect.shadowScale 陰影比例
[Python] Pandas 並列顯⽰DataFrame
navigation.nextEl 上⼀⾴按鈕物件 (https://ithelp.ithome.com.tw/articles/102
11023)
navigation.prevEl 下⼀⾴按鈕物件 Hi-cloud雲端伺服器維運⼯程師,可遠端上
班
(https://ithelp.ithome.com.tw/articles/102
11032)

https://ithelp.ithome.com.tw/articles/10197850 4/6
2019/3/3 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

《延伸》
技術問答 (https://ithelp.ithome.com.tw/questions)
存取控制
技術文章 (https://ithelp.ithome.com.tw/articles?tab=tech)
(https://ithelp.ithome.com.tw/articles/102
10880)
1. Swiper - Most Modern Mobile Touch Slider 登入/註冊 (https://ithelp.ithome.com.tw/users/login)
[cmd] XCOPY備份功能
(http://idangero.us/swiper/) (https://ithelp.ithome.com.tw/articles/102
10952)
2. nolimits4web/swiper: Most modern mobile touch slider with hardware
DevOps實作系列文
accelerated transitions (https://github.com/nolimits4web/Swiper) (https://ithelp.ithome.com.tw/articles/102
11015)
WordPress 是什麼？TechMoon 科技⽉球
0
- 新⼿入⾨教學
讚 (https://ithelp.ithome.com.tw/articles/102
11033)
a 架設⼀個商品型錄網站
 留⾔ 1  追蹤 (https://ithelp.ithome.com.tw/users/login)
(https://ithelp.ithome.com.tw/articles/102
b  檢舉 (https://ithelp.ithome.com.tw/users/login) 11064)

c 【You Don't Know JS: Types &

上⼀篇 下⼀篇 Grammar】Chapter 4-1 筆記
 
[⼗分鐘學習] List.js - 資料排序 2018鐵⼈賽索引和⼼得(圖多慎入) (https://ithelp.ithome.com.tw/articles/102
(https://ithelp.ithome.com.tw/articles/10197840)
(https://ithelp.ithome.com.tw/articles/10197789) 11012)
Gogs WebHook 與 Jenkins搭配
系列文 (https://ithelp.ithome.com.tw/articles/102
11018)
30天學習30套前端技術(2018年) ⽤⼾故事 vs ⽤例

(https://ithelp.ithome.com.tw/users/20091292/ironman/1595) 共 61 篇 (https://ithelp.ithome.com.tw/articles/102
11053)
⽬錄  訂閱系列文 (https://ithelp.ithome.com.tw/users/login) 164 ⼈訂閱

57 [⼗分鐘學習] ScrollReveal - 動態顯⽰內容 ⼀週點數排⾏

(https://ithelp.ithome.com.tw/articles/10197882) 更多點數排⾏ 
(https://ithelp.ithome.com.tw/point_rank/total)
58 [⼗分鐘學習] datedropper - 活潑風格⽇期選擇器
(https://ithelp.ithome.com.tw/articles/10197883) 1 海綿寶寶 (antijava)
(https://ithelp.ithome.com.tw/users/2000
59 [⼗分鐘學習] Cleave.js - 欄位格式化⼯具
2 yoching (yoching)
(https://ithelp.ithome.com.tw/articles/10197884)
(https://ithelp.ithome.com.tw/users/2010
60 [⼗分鐘學習] In nite Scroll - 捲軸瀏覽⾄底載入新資料
3 allenlwh (allenlwh)
(https://ithelp.ithome.com.tw/articles/10197885)
(https://ithelp.ithome.com.tw/users/2003
61 2018鐵⼈賽索引和⼼得(圖多慎入) (https://ithelp.ithome.com.tw/articles/10197789)
4 echochio (echochio)
 完整⽬錄 (https://ithelp.ithome.com.tw/users/20091292/ironman/1595) (https://ithelp.ithome.com.tw/users/2011

5 raytracy (raytracy)
(https://ithelp.ithome.com.tw/users/2002

1 則留⾔ 6 souda (souda)

(https://ithelp.ithome.com.tw/users/2008

7 ⼩⿂ (henrychang)
 丹尼 (https://ithelp.ithome.com.tw/users/20058145/pro le) (https://ithelp.ithome.com.tw/users/2010
iT邦研究⽣ 4 級 ‧ 2018-02-07 20:35:36
0 (https://ithelp.ithome.com.tw/users/20058145/pro le)
8 jeles51 (jeles51)

讚唷 (https://ithelp.ithome.com.tw/users/2010

9 sleeping_ sh (sleeping_ sh)

(https://ithelp.ithome.com.tw/users/2011

10 純真的⼈ (jer5173)
 回應  檢舉 (https://ithelp.ithome.com.tw/users/login)
(https://ithelp.ithome.com.tw/users/2006
登入發表回應 (https://ithelp.ithome.com.tw/users/login)

我要留⾔

立即登入留⾔ (https://ithelp.ithome.com.tw/users/login)

https://ithelp.ithome.com.tw/articles/10197850 5/6
2019/3/3 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

技術問答 (https://ithelp.ithome.com.tw/questions) 技術文章 (https://ithelp.ithome.com.tw/articles?tab=tech)

登入/註冊 (https://ithelp.ithome.com.tw/users/login)
(https://adcl.pchome.com.tw/clickAd2.html?q=41~ithome_forum~1238936)

iThome 服務   iThome online (https://www.ithome.com.tw/) iThome Learning (https://learning.ithome.com.tw/)

電週文化事業版權所有、轉載必究 | Copyright © iThome 刊登廣告 (https://www.ithome.com.tw/aboutus/)

授權服務 (https://www.ithome.com.tw/aboutus/) 服務信箱 (mailto:ithelp@mail.ithome.com.tw)
0 隱私權聲明與會員使⽤條款 (https://www.ithome.com.tw/terms) iT邦幫忙使⽤說明 (https://ithelp.ithome.com.tw/guide)
讚

https://ithelp.ithome.com.tw/articles/10197850 6/6