影像功能區可表示為 ul/li 影像清單 <img>。

一般來說，此類功能區很寬，但我們會在周圍放置一個固定大小的 <div> 來「裁剪」它，以便只顯示功能區的一部分

若要讓清單水平顯示，我們需要套用正確的 CSS 屬性給 <li>，例如 display: inline-block。

對於 <img>，我們也應該調整 display，因為預設為 inline。在 inline 元素下方保留了額外的空間，用於「字母尾巴」，因此我們可以使用 display:block 來移除它。

若要執行捲動，我們可以移動 <ul>。有許多方法可以執行此操作，例如變更 margin-left 或（效能較佳）使用 transform: translateX()

外部 <div> 有固定的寬度，因此會裁剪「額外」的影像。

整個旋轉木馬是頁面上的獨立「圖形元件」，因此我們最好將它包裝到單一 <div class="carousel"> 中，並在其中設定樣式。

在沙盒中開啟解決方案。