CSS實現左右滑動的操作十分簡單，只需使用CSS中的transform屬性和transition屬性，配合一些JavaScript即可。

CSS代碼：
.slider-container {
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
width: 300%;
transition: transform 0.5s ease-in-out; 
}
.JavaScript代碼：
var slider = document.querySelector('.slider');
var slideIndex = 0;
function slideNext() {
if (slideIndex< 2) {
slideIndex++;
slider.style.transform = 'translateX(-' + (slideIndex * 100)  + '%)';
}
}
function slidePrev() {
if (slideIndex >0) {
slideIndex--;
slider.style.transform = 'translateX(-' + (slideIndex * 100)  + '%)';
}
}
注釋：
首先，將.slider-container設置為100%寬度，并隱藏溢出的內容。
然后，為.slider設定三倍的寬度，以便通過translateX()移動內容。
因為使用了display:flex;，所以能夠自適應手機端和電腦端的寬度。
在JavaScript中，定義了slideNext()和slidePrev()函數來移動.slider中的內容。
slideNext()函數檢查是否到達最后一頁，然后通過設置樣式來實現移動效果。
slidePrev()函數檢查是否到達第一頁，然后通過設置樣式來實現移動效果。

最后，將slideNext()和slidePrev()函數分別與左右箭頭的click事件關聯，即可實現左右滑動的效果。