商品左右滑動是現代網站中非常常見的特效之一，它可以使用戶體驗更流暢、操作更簡單，成為很多電商網站的必備功能。下面是一組使用CSS實現商品左右滑動效果的代碼片段示例。

/* 首先是基本樣式 */
.product-list {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.product-item {
display: inline-block;
width: 240px;
margin-right: 20px;
}
/* 手勢支持 */
.product-list {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.product-item {
scroll-snap-align: center;
}
/* 控制滾動條樣式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #ccc;
}
::-webkit-scrollbar-track {
background-color: #f2f2f2;
}

以上代碼包括了基本樣式和手勢支持的代碼，同時還包括了對滾動條樣式的調整，讓其更加美觀。其中，我們使用了流布局白空格 nowrap，以保證商品能夠水平排列。

對于手勢支持，我們使用了scroll-snap-type和scroll-snap-align屬性，可以使用戶在滑動時更加自然，并且停止滑動后能夠自動對齊。而使用-webkit-overflow-scrolling屬性可以提高頁面滑動流暢性。

最后，為了菜單滑動效果更加完美，我們調整了滾動條的樣式，讓其更加符合頁面整體風格。這可以通過::-webkit-scrollbar-thumb、::-webkit-scrollbar以及::-webkit-scrollbar-track偽類選擇器來實現。