HTML5 移動端圖片輪播：無滾動條、順滑觸控，推薦 flipsnap.js

需求：京東商品頁式圖片左右滑動，無滾動條、手指跟隨順滑、釋放自動吸附。原生 overflow-x:auto 會出現滾動條；手寫 touchmove 位移難以實現慣性與邊界彈性。

推薦方案：flipsnap.js

• 輕量（~5KB gzip）、無依賴
• 支持循環、自動播放、自定義動畫曲線
• API 簡單：new Flipsnap('.carousel')

核心 CSS 隱藏滾動條

.carousel {
    overflow: hidden;          /* 關鍵：隱藏滾動條 */
    white-space: nowrap;
    font-size: 0;              /* 消除 inline-block 間隙 */
}
.item {
    display: inline-block;
    width: 100%;               /* 或固定寬度 */
    white-space: normal;
    font-size: 16px;
}

原生 Touch 實現難點

• 區分「點擊」與「滑動」：需 touchstart 記錄座標，touchend 判斷位移閾值
• 慣性動畫：需 requestAnimationFrame 實現減速曲線
• 邊界吸附：超出範圍需彈回動畫
• 性能：頻繁 transform 需 will-change、GPU 加速

替代庫

Swiper、iSlider、better-scroll 均成熟可用，按項目依賴體積選型。