🏅 切版任務 Day24 - Swiper 輪播套件

--- tags: 30 天軟體工程師體驗營｜2025 --- # 🏅 切版任務 Day24 - Swiper 輪播套件 ### Swiper.js 這是一個 JS 的輪播套件，載入套件，撰寫基本 HTML 結構、JS 設定，即可製作出簡易的輪播效果，大家可以嘗試運用看看。從 [Get Started 頁面](https://swiperjs.com/get-started/) 就可以看到要使用此套件有哪些引入方法，這邊我們就先嘗試使用 [CDN](https://swiperjs.com/get-started#use-swiper-from-cdn) 載入。 ![](https://imgur.com/GUmSL7u.png) ```htmlembedded=  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> ``` > 使用 CodePen 可以直接將 `href`、`src` 內連結分別貼至 Settings CSS、JS 區塊「Add External Stylesheets/Pens」內（詳細可以再觀看下方範例）接下來了解基本使用方式，這邊會以設計稿的「部落格精選區塊」來作範例 ### HTML 結構： 1. `.swiper` 是 Swiper 的主要容器，必須存在 2. `.swiper-wrapper` 是所有 slide 的包裹區塊，是 Swiper 的固定結構 3. `.swiper-slide`：每一個幻燈片項目 4. `.swiper-button-prev` / `.swiper-button-next`：是左右導航箭頭的容器。整體的結構會如以下： ``` <div class="container"> <div class="swiper"> <ul class="swiper-wrapper"> <li class="swiper-slide">...卡片內容...</li>  </ul>  <div class="swiper-button-prev"></div>  <div class="swiper-button-next"></div> </div> </div> ``` <iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 Swiper RWD 變換排版調整解答" src="https://codepen.io/yen-kg/embed/MYYzQXQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yen-kg/pen/MYYzQXQ"> 每日任務 - 🏅 Swiper RWD 變換排版調整解答</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### ### CSS 說明與客製箭頭： 1. Swiper 會自動加上一個 ::after 製作箭頭，如果之後要使用自訂的箭頭，要先關掉預設箭頭： ``` .swiper-button-prev::after, .swiper-button-next::after { display: none; } ``` 2. 調整自訂箭頭的外觀與位置 * position: absolute; 搭配 top: 50% 讓箭頭垂直置中。 * left: -20px / right: -20px 控制箭頭與 Swiper 的距離。 * border-radius: 50% 搭配 background-color 做出圓形箭頭按鈕。 * box-shadow 增加立體感。 * display: flex + align-items + justify-content 可讓 icon 水平垂直居中。 ``` .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: white; border-radius: 50%; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; } .swiper-button-prev { left: -20px; } .swiper-button-next { right: -20px; } .swiper-button-prev i, .swiper-button-next i { color: #333; font-size: 18px; } ``` 最後呈現的效果會如以下： <iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 Swiper 輪播套件 - 範例 1" src="https://codepen.io/yen-kg/embed/pvvQLex?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yen-kg/pen/pvvQLex"> 每日任務 - 🏅 Swiper 輪播套件 - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 接著我們要將箭頭移動到外層 1. 在 .swiper 的外層加上一層 div (.swiper-wrapper-area) 2. 在 .swiper-wrapper-area 加上以下 CSS ``` .swiper-wrapper-area { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } ``` 3. 最後再將 .swiper-button-prev / next 移動到 .swiper 的外層整體的結構會如以下： <iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 Swiper 輪播套件 - 範例 2" src="https://codepen.io/yen-kg/embed/YPPRLqY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yen-kg/pen/YPPRLqY"> 每日任務 - 🏅 Swiper 輪播套件 - 範例 2</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## 題目複製此 [CodePen 範例](https://codepen.io/yen-kg/pen/PwwxeXv)，請在 HTML 中加入左右箭頭的標籤，完成跟範例中一樣的箭頭樣式。並且請將箭頭移動到輪播區塊之外 (如下圖) ![image](https://hackmd.io/_uploads/rkmcUzkbeg.png) ## 回報流程將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報（也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png)  回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 1 | 4chan | [codepen](https://codepen.io/ijuolaqc-the-looper/pen/xbGGJpe) | | 2 | 7Lun | [Day24-codepen](https://codepen.io/mfyvqhsn-the-bold/pen/LEVVBaE) | | 3 | dean | [codepen](https://codepen.io/ch933114/pen/gbppjym?editors=1100) | | 4 | 謝天 | [codepen](https://codepen.io/crisxie/pen/MYwwqWZ) | | 5 | NAOJUN | [codepen](https://codepen.io/NAOJUN/pen/jEPPvRj) | | 6 | Melanie | [codepen](https://codepen.io/pnrcspte-the-animator/pen/azOORZw) | | 7 | Joseph_Kyuu | [codepen](https://codepen.io/zrzfastd-the-reactor/pen/OPVVBze) | | 8 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/xbGGyRX?editors=1100) | | 9 | 登登登 | [CodePen](https://codepen.io/Duncanin/pen/emNNPwe) | | 10 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/XJbbyWE) | | 11 | Min | [CodePen](https://codepen.io/cvqevoxk-the-decoder/pen/emNNbda) | | 12 | Aoi | [CodePen](https://codepen.io/zching07/pen/gbppdLX) | | 13 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/pvJJZrp) | | 14 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/WbvvqXO) | |15|蛋殼|[Codepen](https://codepen.io/weybrian/pen/raVVXWE) | 16 | tina01170 | [CodePen](https://codepen.io/tina-huang-the-bashful/pen/wBaKvaM?editors=1100) | | 17 | Cyan66 | [CodePen](https://codepen.io/Cyan66/pen/PwqPqNx) | | 18 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/EajjMEr)| | 19 | Holly | [CodePen](https://codepen.io/LEE-HOLLY/pen/ogXjjyK) | | 20 | zhe | [CodePen](https://codepen.io/dotheright/pen/XJbmpqP) | | 21 | pastor | [CodePen](https://codepen.io/peter_hung/pen/raVOeLL) | | 22 | andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/bNdVrEa) | | 23 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/bNdVJqa) | | 24 | cks40660 | [CodePen](https://codepen.io/CKS40660/pen/wBaaLwM) | | 25 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/MYwKmPy)| | 26 | Tetsu | [CodePen](https://codepen.io/ttgchang/pen/ByNjbwy) | | 27 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/bNdEjBN?editors=1100) | | 28 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/yyNOORL?editors=1100) | | 29 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/zxGqRjr) | | 30 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/MYweWNo) | 31 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/bNdpaNw) | 32 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/gbpwGrw) | 33 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/zxGZxwK) | | 34 | Zhu | [CodePen](https://codepen.io/codepenplayer/pen/gbpxGPe) | | 35 | Astrid | [6/7](https://codepen.io/astrid321654/pen/RNPZdEb) | | 36 | 禹成林| [CodePen](https://codepen.io/useirin/pen/myJmBmv) | | 37 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/JodraJV) | | 38 | Klaus Chen | [CodePen](https://codepen.io/Klaus-Chen/pen/azOYbGN?editors=1100) | | 39 | ann.328 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/azOYJjV)| | 40 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/ByNPvxr) | | 41 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/dPogPMb) | | 42 | JiaMori | [CodePen](https://codepen.io/jiamori/pen/qEdJpdg) |

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.