jQuery 圖片輪播插件顯示異常：圖片僅顯示一半的 CSS 衝突排查

問題現象

輪播功能邏輯正常，但每張圖片只顯示一半，懷疑 CSS 樣式衝突導致容器尺寸計算錯誤。

常見原因與解決

1. 容器高度塌陷：輪播容器未設置固定高度或 overflow: hidden，導致圖片超出可視區。

   .carousel-container { height: 400px; overflow: hidden; position: relative; }
      

2. 圖片樣式重置缺失：全局 CSS 設置 img { max-width: 100%; height: auto; } 影響輪播內圖片縮放。

   .carousel img { max-width: none; width: 100%; height: 100%; object-fit: cover; }
      

3. 插件默認樣式被覆蓋：引入順序問題，確保插件 CSS 在自定義 CSS 之前載入，或提高選擇器優先級。

   <link rel="stylesheet" href="jquery.carousel.css">
   <link rel="stylesheet" href="custom.css">  /* 後載入可覆蓋 */
      

4. 響應式斷點衝突：媒體查詢在特定寬度下修改容器尺寸，檢查 @media 規則。

調試技巧

• 瀏覽器開發者工具 → Elements 面板，勾選/取消勾選疑似樣式觀察變化。
• Computed 標籤查看最終生效的 width/height 來源。
• 暫時禁用自定義 CSS，確認是否為插件原生樣式問題。

推薦插件

若自行修復困難，可嘗試成熟插件：

• Swiper（現代、觸控友好）
• Owl Carousel 2
• Flickity