HTML滑動框是一種常用的網頁設計元素，在網頁中通常用來展示多個圖片或內容的滑動切換。在本文中，我們將介紹如何使用HTML代碼構建基本的滑動框。

<div class="slider">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<div class="slide first">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="slide">
<img src="image4.jpg" alt="Image 4">
</div>
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
</div>

如上所示，HTML滑動框的核心是使用radio單選按鈕和css的:target偽類實現的。通過給每一個圖片對應的radio按鈕和slide容器添加相同的id，然后在點擊radio按鈕時，通過css的:target偽類選擇對應的slide容器，從而實現圖片的滑動切換效果。

在這個滑動框中，還添加了兩個導航欄，一個是自動導航欄，一個是手動導航欄。自動導航欄使用css的animation實現了自動切換圖片的效果，而手動導航欄則通過為每一個radio按鈕添加label標簽來實現。這樣做的好處是可以在移動端實現可訪問性更好的體驗，因為一些移動設備無法通過點擊radio按鈕來觸發狀態切換。