CSS圖片幻燈片式是一種簡潔而美觀的網站圖片展示方式，能夠為網站添加更加動感的效果。下面是一個示例代碼實現。

html, body {
height: 100%;
}
.slider-wrapper {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
max-width: 100%;
max-height: 100%;
position: relative;
}
.slider img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .5s ease-out;
}
.slider img.active {
opacity: 1;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 5px;
}
.slider-nav button {
background-color: transparent;
border: none;
outline: none;
margin: 0 5px;
padding: 5px;
}
.slider-nav button.active {
color: #fff;
background-color: #333;
border-radius: 50%;
}

代碼中使用了flex布局，使得slider-wrapper和slider-nav能夠在頁面中居中顯示。每張圖片被設置為絕對定位，覆蓋在“初始”位置，設置不透明度為0，以便實現淡入淡出的效果。通過js進行切換圖片時，給下一張圖片添加active class，同時改變不透明度，實現淡入淡出的效果。

幻燈片中還添加了按鈕，方便用戶手動切換圖片。按鈕被設置在slider-nav中，并使用translateX(-50%)使其水平居中，再用border-radius制成圓形。按鈕的active class有不同的樣式，以方便用戶判斷當前顯示的圖片。