iT邦幫忙

2025 iThome 鐵人賽

DAY 10
0

今天要繼續完成專輯展示區滑動的效果

接續作天的CSS:

5.左右滑動箭頭

https://ithelp.ithome.com.tw/upload/images/20250924/20168364OD1qFoygk1.png
https://ithelp.ithome.com.tw/upload/images/20250924/20168364KEq7O71g19.png

  • position: absolute:固定在輪播區兩側。
  • :disabled:當滑到最左或最右,按鈕變灰不可點。

6.左右箭頭禁用狀態

https://ithelp.ithome.com.tw/upload/images/20250924/20168364qpfCfRPuqi.png


7.響應式設計

https://ithelp.ithome.com.tw/upload/images/20250924/20168364zVwgcALOsW.png
https://ithelp.ithome.com.tw/upload/images/20250924/20168364xsCWCjhMnJ.png

  • 對不同螢幕縮小卡片尺寸與間距,保持輪播可用。

JavaScript

https://ithelp.ithome.com.tw/upload/images/20250924/20168364kl1MDtVuIi.png
https://ithelp.ithome.com.tw/upload/images/20250924/20168364bn0Sh4j7us.png

  • currentIndex:紀錄目前左側第一張卡片的索引。
  • getCardWidth():計算每張卡片含間距的實際寬度,方便平移軌道。
  • updateCarousel():根據 currentIndex 更新 .carousel-tracktranslateX 位置,並控制箭頭狀態。
  • 事件監聽器 addEventListener:按左/右箭頭時,currentIndex 加減 1,然後更新滑動位置。
  • 初始呼叫 updateCarousel():設定初始狀態。

畫面展示

https://ithelp.ithome.com.tw/upload/images/20250924/20168364KGm5LAsMBw.png
https://ithelp.ithome.com.tw/upload/images/20250924/20168364m8B12mcZ8e.png
https://ithelp.ithome.com.tw/upload/images/20250924/20168364HnvxdmCWt9.png


上一篇
專輯展示區及滑動效果(1)
系列文
打造專屬於歌手的音樂資訊網頁:從零開始的前端實作與技術分享10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言