豎直方向的輪播圖是一種常見的網頁設計元素，它可以讓網頁內容看起來更加豐富多彩，給用戶帶來更好的視覺體驗。在本文中，我們將介紹一種實現豎直方向輪播圖的CSS代碼。

.slide-container {
position: relative;
height: 300px; /* 設置輪播圖容器的高度 */
overflow: hidden; /* 隱藏輪播圖容器之外的部分 */
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: slide 10s ease infinite; /* 設置輪播速度和效果 */
}
.slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 圖片自適應容器大小 */
}
@keyframes slide {
0% {
transform: translateY(0); /* 輪播圖從頂部開始滑出 */
}
20% {
transform: translateY(-100%); /* 圖片向上滑出 */
}
40% {
transform: translateY(-200%); /* 圖片向上滑出 */
}
60% {
transform: translateY(-300%); /* 圖片向上滑出 */
}
80% {
transform: translateY(-200%); /* 圖片向下滑入 */
}
100% {
transform: translateY(-100%); /* 圖片向下滑入 */
}
}

以上代碼中，我們定義了一個名為slide-container的輪播圖容器，它有一個定位屬性為relative，高度為300px，overflow:hidden隱藏輪播圖容器之外的部分。接著，我們定義了一個名為slide的輪播圖元素，它擁有絕對定位和全屏寬高。其中，輪播圖底部的圖片通過CSS3的animation屬性實現了向上滑動的效果。

在實際開發中，我們可以根據需要來修改容器高度、圖片數量、輪播速度和動畫效果等參數，從而實現不同樣式的豎直方向輪播圖。