CSS設置Div左右滑動可以給網頁帶來更加豐富的交互體驗，下面我們來看一下具體實現方式：

<div class="slider">
<div class="slides">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>// CSS<style>
.slider {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.slides::-webkit-scrollbar {
display: none;
}
.slide {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 100%;
background-color: #eee;
font-size: 80px;
display: flex;
justify-content: center;
align-items: center;
}
</style>

上述代碼實現了一個簡單的左右滑動的div容器，其中使用了CSS3的flexbox布局、CSS的overflow屬性和scroll-snap屬性等實現，需要注意一些細節點如下：

1. scroll-snap-type屬性規定了沿著x軸方向的滾動方式，這里使用的是“x mandatory”，表示每次滾動一整個視口寬度的距離；

2. scroll-snap-align屬性表示滾動到該元素的左側邊緣對齊視口的左側邊緣，保證了滾動的連續性；

3. 為了消除滾動條，我們使用了一些額外的樣式規則，其中-ms-overflow-style: none;和scrollbar-width: none;是為了IE和FireFox瀏覽器做的兼容。