手動輪播是網頁設計中非常常見的一種效果，可以為用戶帶來更好的交互體驗。本文將介紹如何使用純 CSS 實現手動輪播效果。

首先，我們需要把需要輪播的內容放到一個容器中，并設置容器的寬度，以及隱藏溢出的內容。我們可以使用以下的 CSS 代碼來實現：

.container {
width: 500px;
overflow: hidden;
}

接下來，我們需要為輪播的內容定義一個滑動動畫，用于在用戶點擊按鈕時滑動到下一項或前一項。我們可以使用以下的 CSS 代碼來實現：

.slide {
transition: transform .5s ease-in-out;
}

上面的代碼定義了一個 transform 動畫，并設置了過渡時間為 0.5 秒，緩動效果為 ease-in-out。

接下來，我們需要為顯示當前輪播項的指示器添加樣式。我們可以使用以下的 CSS 代碼來實現：

.indicator {
display: flex;
justify-content: center;
}
.indicator a {
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #ccc;
}
.indicator a.active {
background-color: #333;
}

上面的代碼定義了一個 flex 布局的指示器容器，并設置了每個指示器的樣式。同時，對于當前輪播項的指示器，我們添加了一個 .active 類，并設置了不同的背景色。

最后，我們需要添加 JavaScript 代碼來處理用戶點擊事件，使得輪播可以手動切換。我們可以使用以下的 JavaScript 代碼：

var container = document.querySelector('.container');
var slides = document.querySelectorAll('.slide');
var indicators = document.querySelectorAll('.indicator a');
var current = 0;
indicators.forEach(function(indicator, index) {
indicator.addEventListener('click', function() {
slides[current].classList.remove('active');
indicators[current].classList.remove('active');
current = index;
slides[current].classList.add('active');
indicators[current].classList.add('active');
container.style.transform = 'translateX(' + (-current * 500) + 'px)';
});
});

上面的 JavaScript 代碼首先獲取容器、輪播項以及指示器的 DOM 元素。然后，我們為每個指示器添加了一個 click 事件監聽器，用于在用戶點擊時切換輪播項。具體的實現中，我們通過對輪播項和指示器添加或移除 .active 類來更改當前選中項和樣式。最后，我們使用 JavaScript 動態計算容器的 transform 值，實現動畫效果。

至此，我們已經完成了純 CSS 實現手動輪播效果的全部代碼。通過以上的實現方法，可以讓我們更加靈活地制作出漂亮的手動輪播效果，提升用戶體驗。