🏅 Day 37 - Swiper 輪播套件介紹

# 🏅 Day 37 - Swiper 輪播套件介紹 ### 一、Swiper 套件介紹 [Swiper](https://swiperjs.com/) 這是一個 JS 的輪播套件，載入套件，撰寫基本 HTML 結構、JS 設定，即可製作出簡易的輪播效果，今天我們就透過操作一些參數認識這個套件吧 ~ 從 [Get Started 頁面](https://swiperjs.com/get-started/) 可以依據自己的需要選擇引入的方式，因為我們目前是使用 CodePen 練習，所以我們是以 CDN 的方式導入官方提供的 [CDN](https://swiperjs.com/get-started#use-swiper-from-cdn) ☟ ```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」內（詳細可以再觀看下方範例）接下來了解基本使用方式： 1. 基本的 [HTML 架構](https://swiperjs.com/get-started#add-swiper-html-layout) > 最外層以 div `.swiper` 包覆，是整個 swiper 的容器 > swiper 的內容都放在 `.swiper-wrapper` 中，每個 `.swiper-slide` 是一個輪播項目 > 下方 pagination 分頁、navigation buttons 左右箭頭按鈕、scrollbar 滾動條，可依據需求增減 ```htmlembedded=  <div class="swiper">  <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> ``` 2. [初始化設定](https://swiperjs.com/get-started#swiper-css-stylessize) **CSS：** 如果沒有特別需要限制 swiper 的範圍，可以不需設定，使其自適應即可 ```css= .swiper { width: ...; height: ...; } ``` **JS：** 運用 `new Swiper()` 建立 swiper 實體， `new Swiper()` 有兩個參數： - 第一個參數為字串，需填入欲套用輪播效果的 swiper 容器，以上述基本結構為例，swiper 容器為 `.swiper` - 第二個參數為物件，非必填，可以填入想調整的選項 ```javascript= const swiper = new Swiper('.swiper', { // 分頁、左右箭頭、滾動條若有使用則必需設定 // 分頁 pagination: { el: '.swiper-pagination', }, // 左右箭頭 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 滾動條 scrollbar: { el: '.swiper-scrollbar', }, }); ``` 此時就可以簡單呈現出一個輪播效果摟！觀看 [範例](https://codepen.io/hexschool/pen/KKGYjGN) 若想要進一步取得更個別化的畫面與功能，可以閱讀[這裡](https://swiperjs.com/swiper-api#parameters)，其中有相關功能的參數可以設定參考。另外也可以在 [DEMO](https://swiperjs.com/demos) 的部分尋找預期中的模板，再點擊 Core 後就能複製內容的程式碼，並依據需求做調整哦。 ### 題目接下來我們就實際練習看看：請透過設定參數將此 [Default](https://swiperjs.com/demos#default) ☟ ![image](https://hackmd.io/_uploads/Skh1p3Zj0.png) <br> 設定為以下的樣式 ☟ ![image](https://hackmd.io/_uploads/Hkw632-iA.png) > 間距調整為 48px > 至少呈現五格照片，此兩張圖片可以重複使用。 **圖片的位置** ```htmlembedded= <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2024-week6/article-banner.png?raw=true" alt="圖片1"> <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2024-week6/articles-2.png?raw=true" alt="圖片2"> ``` 設定樣式提醒 ☟ > - 最外層使用 Bootstrap 中的 container > - 最上方有一個 h1 的標題文字「Swiper」 > `.container > (h1 + .swiper)` > - 由原本一個畫面呈現一個 slide ☞ 一個畫面呈現三個 slide > - 會使用到兩張圖片重複數次(至少五次)，每個 slide 間格 48px > > 因若對套件不熟悉會有一些操作上的困難，若有疑問可直接參考答案。 ## 回報流程將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png)  回報區 --- |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 01 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/wvLPMqq) | | 02 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/KKjyVvR) | | 03 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/XWLzXBw) | |04|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/ExBbPRq)| |05|tim|[Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB)| | 06 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/VwJrKew)| | 07 | KUN. | [Codepen](https://codepen.io/barry91205/pen/WNqXppZ) | | 08 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/MWMOpgQ) | | 09 | kawa | [Codepen](https://codepen.io/z83xji6/pen/OJeOmjw) | | 10 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/dyBZWKZ) | | 11 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/RwzjLey) | | 12 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/zYVPjaX) | | 13 | kaka_945 | [Codepen](https://codepen.io/kay945/pen/gONXKMo) | | 14 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/KKjyWpy) | | 15 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/mdZqKqX) | | 16 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/NWZwBEr?editors=1100) | | 17 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/gONXEqO)| | 18 | haojing |[Codepen](https://codepen.io/hjxu/pen/JjQrzMa)| | 19 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/LYKOrGZ) | | 20 | xcx100 | [Codepen](https://codepen.io/c13026/pen/BagJQMq) | | 21 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/jOjYLKY) | | 22 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/YzoYrNN) | | 23 | wind | [Codepen](https://codepen.io/wind7y/pen/wvLpyyX) | | 24 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/oNrpmmZ?editors=1010) | | 25 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/JjQMzmp) | | 26 | Mike | [Codepen](https://codepen.io/mike2049/pen/PorEgJZ) | | 27 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/eYwVoJW) | | 28 | Glen_689515|[Codepen](https://codepen.io/glenyaochih/pen/RwzQmKR)| | 29 | PoWei|[Codepen](https://codepen.io/Po-Wei-Lai/pen/BagmOjL)| | 30 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/QWXmPXd) | | 31 | Enn | [Codepen](https://codepen.io/enntang/pen/KKjRxYg) | | 32 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/vYqjPve) | | 33 | emmayo | [Codepen](https://codepen.io/emmayo/pen/YzovXEm) | | 34 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/ExBpVoB) | | 35 | yoishere | [Codepen](https://codepen.io/yoishere/pen/qBzMdKK) | | 36 | Charlotte Wong | [Codepen](https://codepen.io/Charlotte-Wang/pen/bGPmmXG) | | 37 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/vYqVpqJ) | | 38 | macihuang| [Codepen](https://codepen.io/macy1215/pen/KKjJKeV) | | 39 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/LYKqYEL?editors=1100) | | 40 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/qBzwWqw) | | 41 | Chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/jOjRWqE) | | 42 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/WNqqZLo) | | 43 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/oNKvQeJ?editors=1010) | | 44 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/mdNJyje) | | 45 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/emYQaVZ) |

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.