CSS列表左右滑動效果是一種常見的網頁效果。當列表中的內容過多時，可以使用滑動效果來展示全部內容，這樣可以更好地節省網頁空間，同時也能使頁面看起來更簡潔。下面我們就來介紹如何使用CSS實現列表左右滑動效果。

HTML代碼：
<div class="wrapper">
<div class="slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
CSS代碼：
.wrapper {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider {
width: 1200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transition: all 0.5s ease;
}
.slider ul {
width: 1200px;
height: 200px;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.slider li {
width: 200px;
height: 200px;
font-size: 40px;
text-align: center;
line-height: 200px;
}
JavaScript代碼：
var slider = document.querySelector('.slider');
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
next.onclick = function() {
slider.style.left = '-400px';
}
prev.onclick = function() {
slider.style.left = '0';
}

在這段代碼中，我們首先設置了一個寬度為400px、高度為200px的wrapper容器，將其overflow屬性設置為hidden。然后，我們在這個容器中創建了一個1200px寬度、同樣是200px高度的slider容器，該容器中包含一個ul列表標簽。

我們使用CSS將該ul標簽的樣式設為了display: flex，這樣就可以在同一行內排列進行滑動。我們還為ul標簽下的li標簽設置了樣式：每個li標簽都有一個寬度為200px、font-size為40px的正方形，并且使用text-align和line-height屬性設置文本居中和行高為200px。

通過設置slider容器的position為absolute，left和top屬性都為0，我們將其定位到wrapper容器的左上角。

最后，我們使用JavaScript為頁面添加滑動效果。通過鼠標點擊事件，我們設置了slider容器的left屬性為-400px或0px，從而實現了頁面的左右滑動效果。