CSS幻燈片是現代網頁設計中不可或缺的一部分，它可以讓頁面更加生動、吸引人。這里提供一份基礎的純CSS幻燈片代碼，你可以根據需要進行修改。

.slider {
overflow: hidden;
width: 100%;
position: relative;
}
.slides {
display: flex;
width: 100%;
position: relative;
transition: transform 0.5s ease-in-out;
}
.slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition: transform 0.5s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 控制器 */
.controls {
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.control {
cursor: pointer;
margin: 0 10px;
}
.control.active {
font-weight: bold;
}
/* 動畫效果 */
.slide.animate-next {
transform: translateX(-100%);
}
.slide.animate-prev {
transform: translateX(100%);
}
.slide.animate-next.active,
.slide.animate-prev.active {
transform: translateX(0%);
}

這段代碼的核心是利用flexbox布局來實現幻燈片。幻燈片通過transform屬性的改變實現滑動效果，這里使用了CSS3過渡動畫。控制器部分是可選的，你可以根據需要進行添加或刪除。