CSS垂直輪播圖是一種常見的網頁元素，它可以讓你展示多張圖片或文字，具有吸引人的效果。本文將介紹如何使用CSS實現垂直輪播圖。

HTML部分：
CSS部分：
.slider {
height: 350px;
width: 50%;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.slider ul {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
animation: slide 10s infinite linear;
}
.slider li {
width: 100%;
height: 100%;
}
/* 動畫效果 */
@keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-350px);
}
}

上述代碼實現了一個簡單的垂直輪播圖，具有以下特點：

• 容器需要設置高度和寬度，且overflow屬性為hidden，使得超出容器尺寸的部分被隱藏。
• 圖片列表需要使用flex布局，并設置動畫效果，使其沿著Y軸方向循環滑動。
• 每張圖片需要設置高度和寬度，以適應容器的尺寸。

在使用CSS輪播圖時，可以根據設計需要進行相應的調整，例如增加輪播圖按鈕、調整輪播圖間隙等等。希望本文能夠幫助你實現自己的CSS垂直輪播圖。