我們經常遇到需要左右輪播的需求，比如網站的焦點圖、新聞列表等等，今天我們來介紹一些使用CSS實現左右輪播的方式。

首先，我們需要一個父容器，用來包含所有的輪播元素。在這個父容器中，我們使用CSS的flexbox布局來實現元素的橫向排列，設置好align-items為center，justify-content為flex-start，即可實現元素居中對齊，并且從左往右排列。在父容器中使用overflow: hidden來控制顯示區域，再加上white-space: nowrap防止元素換行。

.carousel-container {
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
white-space: nowrap;
}

接下來，我們用CSS3的動畫來實現左右輪播的效果。我們給父容器添加一個animation屬性，設置動畫名稱為slide，動畫時間為2s，動畫軌跡為貝塞爾曲線，動畫重復次數為無限循環，并且設置為alternate方向輪流切換。在slide動畫中，我們使用transform: translateX來移動元素，這里是減少容器寬度，即-x軸方向移動，實現向左輪播。我們定義另一個動畫名稱為slide-reverse，方向相反，可以實現向右輪播。

.carousel-container {
animation: slide 2s ease infinite alternate;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-reverse {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}

最后，我們需要使用JavaScript來觸發輪播，這里我們定義一個currentSlide變量表示當前元素的索引，然后定時器每隔2秒將currentSlide加1，然后根據currentSlide的奇偶性來判斷向左還是向右輪播，并且根據元素數量循環輪播。這里的代碼比較簡單，就不貼了。

這樣我們就實現了一個使用CSS3動畫實現的左右輪播效果，既簡單又美觀。