### 題目 今天要來實作第八週「什麼是 ALPHABOX+」swiper 輪播區塊,這邊會需要客製化左右箭頭樣式,並在手機版時移除箭頭與調整自動輪播 ![](https://hackmd.io/_uploads/Sk1AImmp2.png) 可以嘗試自行製作,參考下方模板修改 HTML、JS `...` 的部分 HTML: ```htmlembedded= <div class="container-fluid"> <div class="row align-items-center justify-content-between g-0"> <!-- 左箭頭 --> <div class="col-1 d-... d-md-..."> <div class="swiper-button-prev"> <img src="https://hackmd.io/_uploads/BJUmHUm6n.png" alt="left arrow" class="img-fluid rotate"> </div> </div> <!-- Slides --> <div class="col-md-9 mt-3"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="alphabox d-flex flex-column align-items-start align-items-md-end justify-content-end justify-content-md-center"> <div class="alphabox-intro"> <h3 class="lh-base text-md-end mb-3"> <span class="font-Shrikhand fs-96">01</span><br> <span class="alphabox-title">立體投影技術</span> </h3> <p class="mb-0">透過高科技立體投影技術,讓您感受真實的科技世界。</p> </div> </div> </div> <div class="swiper-slide"> 2 </div> <div class="swiper-slide"> 3 </div> </div> </div> </div> <!-- 右箭頭 --> <div class="col-1 d-... d-md-..."> <div class="swiper-button-next"> <img src="https://hackmd.io/_uploads/BJUmHUm6n.png" alt="right arrow" class="img-fluid"> </div> </div> </div> </div> ``` SCSS: ```css= body { background-color: #000000; font-family: 'Noto Sans TC', sans-serif; color: #fff; } .font-Shrikhand { font-family: 'Shrikhand', cursive; } .fs-96 { font-size: 96px; } .alphabox { height: 351px; background-image: url(https://hackmd.io/_uploads/Syn6HV7Tn.png); background-size: cover; background-position: center; padding: 16px; @media (min-width: 768px) { height: 560px; padding-right: 40px; } &-title { letter-spacing: 24px; @media (min-width: 768px) { letter-spacing: 32px; margin-right: -32px; } } } .rotate { rotate: 180deg; } // 箭頭 .swiper-button-next, .swiper-button-prev { color: #fff; position: initial; margin-top: 0; width: auto; height: auto; &::after { content: ''; } } ``` JS: ```javascript= const swiper = new Swiper('.swiper', { autoplay: { delay: 5000, }, breakpoints: { 768: { autoplay: { enabled: ..., } } }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); ``` ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: https://codepen.io/hexschool/pen/MWZwJqg --> - ==記得匯入 Swiper CSS CDN== # 2個以上swiper控制 https://blog.csdn.net/qq_60353088/article/details/125630554 回報區 --- | # | Discord | CodePen / 答案 | |:--:|:-------------:|:-------------------------------------------------------------:| | 01 | bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/GRPqEOg) | | 02 | shcopy | [CodePen](https://codepen.io/shcopy/pen/eYbzRrr) | | 03 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/WNLxOoG) | | 04 | Yu | [CodePen](https://codepen.io/yuch3n_chen/pen/gOZMRZM) | | 05 | Uli | [CodePen](https://codepen.io/uli1313/pen/ExGyXGG) | | 06 | Tami | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/WNLxEQd) | | 07 | meowmeow | [CodePen](https://codepen.io/snow1224/pen/QWzEMym) | | 08 | townyuan | [CodePen](https://codepen.io/townyuan/pen/gOZMxXx) | | 09 | AYA | [CodePen](https://codepen.io/NoNameNote/pen/xxmOLgK) | | 10 | Moreene |[CodePen](https://codepen.io/Moreene/pen/wvRWrKQ?editors=1100)| | 11 | kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/KKbMXWP)| | 12 | hao2485 |[CodePen](https://codepen.io/Seanfeb16/pen/BavzwXB)| | 13 | pinyi_9 |[CodePen](https://codepen.io/Wpypy/pen/rNoLGje)| | 14 | ann6212 |[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/RwERjOW)| | 15 | hannahTW |[CodePen](https://codepen.io/hangineer/pen/GRPqOaq)| | 16 | adele6199 | [CodePen](https://codepen.io/codepen-io-winnie/pen/WNLxdLa) | | 17 | ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/XWoKVOJ) | | 18 | lychee_kk | [CodePen](https://codepen.io/kakakala/pen/ExGybXR) | | 19 | yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/RwERYRR?editors=1010) | | 20 | runweiting | [CodePen](https://codepen.io/weiting14/pen/RwEGgPE) | | 21 | m_m | [CodePen](https://codepen.io/minnn7716/pen/YzdGxZy) | | 22 | Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/rNoMJQL) | | 23 | Renee Wang | [CodePen](https://codepen.io/Renee-Wang-2022/pen/XWoKgGy) | | 24 | ovo.yun | [CodePen](https://codepen.io/yun-the-scripter/pen/VwqKOBr) | | 25 | soniawu | [CodePen](https://codepen.io/YUJOU/pen/mdaOPYj) | | 26 | 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/VwqPjpX) | | 27 | Long | [CodePen](https://codepen.io/BF-Tsai/pen/GRPqEOg?editors=1010) | | 28 | wind | [CodePen](https://codepen.io/wind7y/pen/gOZWaGe) | | 29 | 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/QWzvYQM) | | 30 | yuan2781 | [CodePen](https://codepen.io/ismebir/pen/abPLKGE) | | 31 | tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/XWoZvOo) | | 32 | patrickpie | [CodePen](https://codepen.io/patrickpie/pen/PoXeYyO) | <!-- 快速複製 | 00 | user | [CodePen]() | -->
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up