CSS商品輪播圖是一種常見的網頁設計組件，它可以幫助網頁設計者展示多個商品，增強用戶體驗。下面我們來看一下如何使用CSS代碼創建一個簡單的商品輪播圖。

HTML代碼：
<div class="slider">
<div class="slide-container">
<img src="product1.jpg" alt="Product 1">
<img src="product2.jpg" alt="Product 2">
<img src="product3.jpg" alt="Product 3">
</div>
</div>
CSS代碼：
.slider {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.slide-container {
width: 300%;
height: 100%;
position: relative;
left: 0;
transition: left 0.6s ease;
}
.slide-container img {
width: 33.333333%;
float: left;
}
.slider:hover .slide-container {
left: -100%;
}

在這段CSS代碼中，我們定義了一個名為slider的div元素，它具有100%的寬度和300px的高度，并且它的overflow屬性被設置為hidden，以便隱藏超出其內容區域的任何內容。

在我們的slide-container div中，我們定義了一系列img元素，它們分別代表三個商品的圖片。slide-container div被設置為將img元素的寬度設置為屏幕寬度的1/3，并且它的寬度設置為所有img元素的寬度之和的300%。slide-container div還設置了一個transition屬性，它用于實現輪播動畫效果。

最后，我們使用:hover選擇器為我們的slider div添加一個鼠標懸停事件。當用戶將鼠標懸停在slider div上時，我們的slide-container div將向左滾動，以便展示下一個商品的圖片。

通過使用以上的CSS代碼，我們可以創建一個簡單的商品輪播圖，為我們的網頁增加一點趣味性和動態性。