CSS手機左右滑動效果是現代網站設計中必備的一種動畫效果。它能讓網站內容更具交互性，提高用戶體驗。

// HTML代碼
<div class="slider">
<div class="slider-wrapper">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
</div>
</div>
// CSS代碼
.slider {
overflow: hidden;
width: 100%;
height: 200px;
}
.slider-wrapper {
display: flex;
width: 500%;
transition: transform 0.5s ease-in-out;
}
.slide {
flex: 1 0 auto;
height: 100%;
}
// JavaScript代碼
var slider = document.querySelector('.slider');
var wrapper = document.querySelector('.slider-wrapper');
var slides = document.querySelectorAll('.slide');
var currentSlide = 1;
var slideWidth = slider.clientWidth / 5;
function moveSlides() {
wrapper.style.transform = 'translateX(-' + (currentSlide * slideWidth) + 'px)';
}
setInterval(function() {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
moveSlides();
}, 3000);

在HTML中，我們需要一個slider容器，一個slider-wrapper容器來包含所有的幻燈片，以及若干個slide容器。在CSS中，我們需要設置slider容器的寬高和overflow:hidden來隱藏溢出部分，將slider-wrapper容器設為flex布局，并且將slide容器的flex屬性設置為1，以實現幻燈片等寬分布。在JavaScript中，我們需要定義slider、wrapper、slides三個變量，以及currentSlide和slideWidth兩個變量用來實現幻燈片滑動效果，最后使用setInterval函數控制滑動時間間隔。

使用這些CSS代碼和JavaScript代碼，我們可以輕松地實現手機左右滑動效果。不僅能增加網站的動感，而且可以讓用戶更加方便地查看網站內容，提高用戶體驗。