### 一、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= <!-- 貼到 <head> 內 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" /> <!-- 貼到 </body> 之前 --> <script src="https://cdn.jsdelivr.net/npm/swiper@10/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= <!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> ``` 2. [初始化設定](https://swiperjs.com/get-started#swiper-css-styles-size) **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) ☟ <img src="https://imgur.com/WtxKhjO.png" width="500" style="border: 1px solid rgba(0,0,0,0.1); "> <br> 設定為以下的樣式 ☟ <img src="https://imgur.com/9cbbCqa.png" width="500" style="border: 1px solid rgba(0,0,0,0.1);"> > - 最外層使用 Bootstrap container > - 最上方有一個 h1 的標題文字「Swiper」 > `.container > (h1 + .swiper)` > - 由原本 一個畫面呈現一個 slide ☞ 一個畫面呈現三個 slide > - 會使用到五張圖片（5 個 slide），每個 slide 間格 30px > > 若有困難在答案區有進一步的提示。 **五張圖片的位置** ```htmlembedded= <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/event/01.jpg?raw=true" alt="圖片1"> <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/event/02.jpg?raw=true" alt="圖片2"> <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/event/03.jpg?raw=true" alt="圖片3"> <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/event/04.jpg?raw=true" alt="圖片4"> <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/event/05.jpg?raw=true" alt="圖片5"> ``` ### 二、Collapse 實作 在第六週的設計稿，當畫面縮小時，上方的 navbar 部分就無法完全塞滿所有的項目，這個時候會將某一部份項目壓縮起來，這次的設計稿是使用 hamburger menu ![](https://imgur.com/YMkb4Hu.png) 在點擊右上方 hamburger menu 後就能出現下方 REGISTER 與 LOGIN 的畫面，這次的實作我們就採用 Bootstrap 中的 [Collapse元件](https://getbootstrap.com/docs/5.3/components/collapse/) 來處理。 請了解 [Collapse](https://getbootstrap.com/docs/5.3/components/collapse/) 架構後，運用下方程式碼，修改 `...` 的部分與嘗試選擇位置合併 Collapse 的主體，讓 Collapse 能實際運作 **主頁 HTML** ```htmlembedded= <nav class="container py-12 d-flex align-items-center justify-content-end border-bottom border-2 border-dark"> <div class="hamburger"> <a class="d-flex align-items-center px-12 py-1 border border-dark rounded h-100" data-bs-toggle="collapse" href="..." role="button" aria-expanded="false" aria-controls="collapseExample"> <span class="material-symbols-outlined"> menu </span></i> </a> </div> </nav> ``` **Collapse 實體的程式碼** ```htmlembedded= <div class="collapse" id="..."> <ul class="container list-unstyled border-bottom border-2 border-dark py-4"> <li class="mb-3"> <a href="#" class="d-flex align-items-center"> <!-- 這邊先統一使用 material ，在實際執行第六週作業時需使用 icofont--> <span class="material-symbols-outlined fs-18"> description </span> REGISTER </a> </li> <li> <a href="#" class="d-flex align-items-center"> <span class="material-symbols-outlined fs-18"> person </span> LOGIN </a> </li> </ul> </div> ``` **CSS** ```css= body { font-family: "Yeseva One"; } a { color: #000000; text-decoration: none; } .fs-18 { font-size: 18px; } .py-12 { padding-top: 12px; padding-bottom: 12px; } .px-12 { padding-right: 12px; padding-left: 12px; } .hamburger span { font-size: 30px; } ``` > 此作業只有呈現手機漢堡選單畫面 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- Swiper 的提示：https://swiperjs.com/demos#slides-per-view 可以參考這個 DEMO 的 JS 部分 --> <!-- Swiper 解答： https://codepen.io/jmimiding4104/pen/jOQpdJP --> <!-- Collapse 實作解答： https://codepen.io/jmimiding4104/pen/jOQpQJL --> 回報區 --- | # | Discord | CodePen / 答案 | |:-:|:----------------------- |:----------------------| | 1 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/xxQvyaq) | | 2 | Amelia | [Codepen-1](https://codepen.io/Amelia-chin/pen/KKrOGbP) / [Codepen-2](https://codepen.io/Amelia-chin/pen/oNQKaVo) | | 3 | Rochel | [Codepen-1](https://codepen.io/rochelwang1205/pen/WNYVaWV) / [Codepen-2](https://codepen.io/rochelwang1205/pen/XWyvyrp)|| | 4 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/JjegmmN) | | 5 | Yu | [Codepen-1](https://codepen.io/yuch3n_chen/pen/RwqXevJ) / [Codepen-2](https://codepen.io/yuch3n_chen/pen/rNQXQNW) | | 6 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/dyQxgrJ) | | 7 | xuan#0808 | [Codepen-1](https://codepen.io/xuan0915/pen/zYMgMxw) / [Codepen-2](https://codepen.io/xuan0915/pen/mdQNQOv?editors=1100) | | 8 | shcopy | [Codepen](https://codepen.io/shcopy/pen/GRwVYBG) | | 9 | pinyi_9 | [Codepen-1](https://codepen.io/Wpypy/pen/QWJeJbw) / [Codepen-2](https://codepen.io/Wpypy/pen/NWEQEbP?editors=1100) | | 10 | stevenchang421 | [Codepen-1](https://codepen.io/vwtrpqmm/pen/xxQvyor) / [Codepen-2](https://codepen.io/vwtrpqmm/pen/YzRmRpJ) | | 11 | meowmeow | [codepen-1](https://codepen.io/snow1224/pen/QWJeJpj) / [codepen-2](https://codepen.io/snow1224/pen/RwqXqMO) | | 12 | Kimi | [codepen-1](https://codepen.io/kimihu91/pen/KKrOrQN) / [Codepen-2](https://codepen.io/kimihu91/pen/WNYmwmZ) | | 13 | ann6212 | [codepen](https://codepen.io/yqmegupa-the-styleful/pen/BaGXqOv) | | 14 | deli0529 | [codepen1](https://codepen.io/delichaomoon/pen/YzRmJBa) / [codepen2](https://codepen.io/delichaomoon/pen/JjegeMZ)| |15|Moreene|[Codepen1](https://codepen.io/Moreene/pen/jOQgQar) / [Codepen2](https://codepen.io/Moreene/pen/rNQXQrY)| | 16 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/NWEQOmZ) | | 17 | ovo.yun | [Codepen1](https://codepen.io/yun-the-scripter/pen/zYMgMWp) / [Codepen2](https://codepen.io/yun-the-scripter/pen/yLQmQxb?editors=1100)| | 18 | kuanju27 | [Codepen1](https://codepen.io/Eero-Chiao/pen/MWzNzqo) / [Codepen2](https://codepen.io/Eero-Chiao/pen/OJaKaqy)| | 19 | Eden | [Codepen1](https://codepen.io/iseden/pen/KKrOrzV) / [Codepen2](https://codepen.io/iseden/pen/abQePOQ)| | 20 | lychee_kk | [Codepen1](https://codepen.io/kakakala/pen/ExOqGad) / [Codepen2](https://codepen.io/kakakala/pen/JjegwEV)| | 21 | m_m | [Codepen](https://codepen.io/minnn7716/pen/JjegwXz) | | 22 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/YzRmByZ) | | 23 | Atsushi#6888 | [Codepen1](https://codepen.io/atsushi-amuro/pen/NWEQoGB) / [Codepen2](https://codepen.io/atsushi-amuro/pen/eYQqxKp?editors=1100)| | 24 | AYA | [Codepen-1](https://codepen.io/NoNameNote/pen/ZEmgwPQ) / [Codepen-2](https://codepen.io/NoNameNote/pen/xxQvBVP) | | 25 | Uli | [Codepen](https://codepen.io/uli1313/pen/mdQNoQN) | | 26 | jacky7035 | [Codepen-1](https://codepen.io/adens123/pen/YzRmgrd) / [Codepen-2](https://codepen.io/adens123/pen/ZEmgPdv) | | 27 | ming0712 | [Codepen-1](https://codepen.io/StevenHuang/pen/gOQVyxw) / [Codepen-2](https://codepen.io/StevenHuang/pen/yLQmrRx) | | 28 | 小夏 | [Codepen-1](https://codepen.io/michaelhsia/pen/oNQKmaG) / [Codepen-2](https://codepen.io/michaelhsia/pen/ZEmgNvE?editors=1100) | | 29 | 泊岸#3466 | [Codepen-1](https://codepen.io/qoq77416416/pen/vYQowwj) / [Codepen-2](https://codepen.io/qoq77416416/pen/QWJeeBQ?editors=1100) | | 30 | hannahTW | [Codepen-1](https://codepen.io/hangineer/pen/vYQowvR) / [Codepen-2](https://codepen.io/hangineer/pen/LYMPPmy?editors=1100) | | 31 | soniawu | [Codepen-1](https://codepen.io/YUJOU/pen/abQeego) / [Codepen-2](https://codepen.io/YUJOU/pen/KKbPPej?editors=1100) | | 32 | yu.t_liu | [Codepen-1](https://codepen.io/YuT200053/pen/eYbOOYa) / [Codepen-2](https://codepen.io/YuT200053/pen/ZEVzzjY) | |33 | Berlin | [Codepen-1](https://codepen.io/3qberlin/pen/QWzLLyZ) / [Codepen-2](https://codepen.io/3qberlin/pen/qBLWWJm) | | 34 | JohnChien | [Codepen-1](https://codepen.io/glqwazid-the-selector/pen/KKbPwpv) / [Codepen-2](https://codepen.io/glqwazid-the-selector/pen/jOXNEYY) | | 35 | .icesam | [Codepen-1](https://codepen.io/icesam/pen/WNLexyr) / [Codepen-2](https://codepen.io/icesam/pen/oNJvLaa) | | 36 | townyuan | [Codepen-1](https://codepen.io/townyuan/pen/gOZYMRy) / [Codepen-2](https://codepen.io/townyuan/pen/zYyOByR) | | 37 | Tami | [Codepen-1](https://codepen.io/wqsdqbjn-the-vuer/pen/RwEbKrY) / [Codepen-2](https://codepen.io/wqsdqbjn-the-vuer/pen/MWZgJRo) | | 38 | Renee Wang | [Codepen-1](https://codepen.io/RENEE-WANG-the-looper/pen/VwVoNPw) / [Codepen-2](https://codepen.io/RENEE-WANG-the-looper/pen/ZEmgZLR) | | 39 | Johnson3669 | [Codepen-1](https://codepen.io/crpbugqy-the-typescripter/pen/YzdKxbq) / [Codepen-2](https://codepen.io/crpbugqy-the-typescripter/pen/rNoBGyX) | | 40 | SKey#9905 | [Codepen-1](https://codepen.io/Dale-Chien/pen/qBLWMqg) / [Codepen-2](https://codepen.io/Dale-Chien/pen/BavBOJQ) | | 41 | rjjq | [Codepen-1](https://codepen.io/rjjq/pen/zYyOJYW) / [Codepen-2](https://codepen.io/rjjq/pen/wvRwEgz) | | 42 | Tina02 | [Codepen-1](https://codepen.io/chjitlox-the-bashful/pen/GRPKYBQ) / [Codepen-2](https://codepen.io/chjitlox-the-bashful/pen/MWZgPXN) | | 43 | awei | [Codepen-1](https://codepen.io/hong-wei/pen/KKbPrez) / [Codepen-2](https://codepen.io/hong-wei/pen/eYbOQbR) | | 44 | shuuu | [Codepen-1](https://codepen.io/afjrvjzl-the-bashful/pen/GRPKPOp?editors=1100) / [Codepen-2]() | | 45 | Randy | [Codepen-1](https://codepen.io/landy510/pen/NWeWxLj) / [Codepen-2](https://codepen.io/landy510/pen/KKbKzzB?editors=0100) | | 46 | wind | [Codepen-1](https://codepen.io/wind7y/pen/dywypdB) / [Codepen-2](https://codepen.io/wind7y/pen/abPbBpo) | | 47 | cest_jessie | [Codepen-1](https://codepen.io/itsjessiechen/pen/RwEwKvE) / [Codepen-2](https://codepen.io/itsjessiechen/pen/mdadWPZ) | | 48 | Jules_Hsu | [Codepen-1 + 2](https://codepen.io/cjntfsoq-the-animator/pen/GRPRMqr) | | 49 | Lianne._. | [Codepen-1](https://codepen.io/Elaina-L/pen/KKbKOXW) | | 50 |yunhsinnnnnnn | [Codepen-1](https://codepen.io/yun___hsin/pen/oNJgYYN) / [Codepen-2](https://codepen.io/yun___hsin/pen/jOXEVYx) | | 51 | tanuki5863 | [Codepen-1](https://codepen.io/tanuki320/pen/bGONryB) / [Codepen-2](https://codepen.io/tanuki320/pen/eYbmGWP) | | 52 | Paul#7426 |[Codepen-1](https://codepen.io/paul-1997/pen/RwENEzb) / [Codepen-2](https://codepen.io/paul-1997/pen/OJrPreM)| | 53 | liam9930|[Codepen-1](https://codepen.io/jgnjfvvt-the-lessful/pen/VwqYMRK) / [Codepen-2](https://codepen.io/jgnjfvvt-the-lessful/pen/XWobrdB)| | 54 | PayRoom#8328 | [Codepen-1](https://codepen.io/water38198/pen/rNoVMYw) / [Codepen-2](https://codepen.io/water38198/pen/GRPJNOZ) | | 55 | mm_ieat | [Codepen-1]() / [Codepen-2]() | | 56 | runweiting | [Codepen-1](https://codepen.io/weiting14/pen/eYbNBdr) / [Codepen-2](https://codepen.io/weiting14/pen/zYyGooJ) | | 57 | 希月 | [Codepen-1](https://codepen.io/9001mina/pen/qBLdvmb) / [Codepen-2](https://codepen.io/9001mina/pen/ZEVGPwE?editors=1100) | | 58 | santu0868 | [Codepen-1](https://codepen.io/HatsumiSan/pen/ZEVbpxp) / [Codepen-2](https://codepen.io/HatsumiSan/pen/wvRKzOv) | | 59 | Long | [Codepen-1](https://codepen.io/Loonng/pen/MWZKYjg) / [Codepen-2](https://codepen.io/Loonng/pen/ZEVQYxQ?editors=1010) | | 60 | adele6199 | [Codepen-1](https://codepen.io/codepen-io-winnie/pen/xxmZdza) / [Codepen-2](https://codepen.io/codepen-io-winnie/pen/vYvLZyN) | | 61 | peggy3169 | [Codepen-1](https://codepen.io/peggylai/pen/jOXWzJv) / [Codepen-2](https://codepen.io/peggylai/pen/poqgVEB) | | 62 | sinsaki225 | [Codepen-1](https://codepen.io/a8322342/pen/OJrXQQq) / [Codepen-2](https://codepen.io/a8322342/pen/RwERJzv) | | 63 | 歐陽龍龍#1061 | [Codepen-1](https://codepen.io/dizzydog-rgb/pen/JjwbRNV) / [Codepen-2](https://codepen.io/dizzydog-rgb/pen/xxmREJo) | | 64 | RX00#5351 | [Codepen-1](https://codepen.io/llqzknqv-the-styleful/pen/QWzERow) / [Codepen-2](https://codepen.io/llqzknqv-the-styleful/pen/oNJBxeL) | | 65 | yuan2781 | [Codepen-1](https://codepen.io/ismebir/pen/RwEgGNM) / [Codepen-2](https://codepen.io/ismebir/pen/GRPEjGz) | | 66 | patrickpie | [Codepen-1](https://codepen.io/patrickpie/pen/RwEMRbQ) / [Codepen-2](https://codepen.io/patrickpie/pen/rNodLbz?editors=1100) | | 67 | 阿維#2569 | [Codepen-1](https://codepen.io/iijojpli-the-looper/pen/xxmQPaM) / [Codepen-2](https://codepen.io/iijojpli-the-looper/pen/yLGQprd) | --- ```markdown= | 0 | user | [Codepen-1](https://codepen.io/MINN3/pen/KKbKJLJ) / [Codepen-2](https://codepen.io/MINN3/pen/bGOdgEM) | ```