幻燈片CSS樣式是設計一個漂亮而功能性的幻燈片展示的關鍵。以下是幾個實用的CSS樣式，可以讓你的幻燈片更加吸引人。

/* 幻燈片框架樣式 */
.slide {
position: relative;
/* 設置高和寬 */
height: 500px;
width: 800px;
margin: 0 auto;
}
/* 頁面幻燈片數量指示器樣式 */
.slide-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slide-indicator span {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
}
.slide-indicator span.active {
background-color: blue;
}
/* 幻燈片控制器樣式 */
.slide-controller {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slide-controller .btn {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.slide-controller .btn:hover {
background-color: #fff;
}
.slide-controller .btn.prev {
position: absolute;
left: 20px;
}
.slide-controller .btn.next {
position: absolute;
right: 20px;
}

以上樣式為幻燈片提供了不同的外觀和功能，例如頁面幻燈片數量指示器和幻燈片控制器。你可以根據你的設計要求，對這些CSS樣式進行更改或自定義，以創建一個獨特而令人印象深刻的幻燈片。