最近在做一個網站的時候，需要用到多張圖片左右滑動的效果，經過一番探索和研究，發現使用CSS可以輕松實現這個效果。

首先，我們需要在HTML中添加一組圖片，可以使用ul和li標簽來實現，如下所示：

<div class="slide-wrapper">
<ul class="slides">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
</ul>
</div>

接著，在CSS中設置這組圖片的樣式，具體的實現方法是通過使用transform屬性和transition屬性來實現圖片的滑動效果，如下所示：

.slide-wrapper {
overflow: hidden;
}
.slides {
display: flex;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
transition: transform 0.5s ease-in-out;
}
.slides >li {
flex: 1 0 100%;
}
.slide-wrapper:hover .slides {
transform: translateX(-25%);
}
.slide-wrapper:hover .slides >li:nth-child(4) {
transform: translateX(100%);
}
.slide-wrapper:hover .slides >li:not(:last-child) {
transform: translateX(-25%);
}

解釋一下上面的代碼：

• .slide-wrapper 的 overflow 屬性設為 hidden，這樣可以隱藏掉超出部分的圖片；
• .slides 的 display 屬性設為 flex，表示這組圖片排列為一排，list-style 和 padding 設為 0，margin 也設為 0 確保排列緊密；
• .slides >li 的 flex 設為 1 0 100%，表示這組圖片的寬度均分為四份，每份占 25% 的寬度；
• .slide-wrapper:hover .slides 的 transform 設為 translateX(-25%)，表示鼠標懸停在圖片上時，圖片向左滑動 25% 的寬度；
• .slide-wrapper:hover .slides >li:nth-child(4) 的 transform 設為 translateX(100%)，表示最后一張圖片向右滑動 100% 的寬度，也就是向右飛出屏幕；
• .slide-wrapper:hover .slides >li:not(:last-child) 的 transform 設為 translateX(-25%)，表示除了最后一張圖片以外的其他圖片都向左滑動 25% 的寬度。

這樣，我們就可以實現多張圖片的左右滑動效果了。如果想要添加更多的圖片，只需要在HTML中添加更多的li標簽即可，CSS中的樣式會自動適應新添加的圖片。