今天我們來學習如何用HTML實現一個滑動輪播。

首先，我們需要用到CSS來設置輪播的樣式：

.carousel {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.carousel-inner {
position: absolute;
width: 300%;
height: 100%;
transition: transform 0.6s ease;
}
.carousel-item {
float: left;
position: relative;
width: 33.33333%;
height: 100%;
background-color: #ccc;
}
.carousel-item img {
width: 100%;
height: 100%;
}

這里我們定義了一個.carousel的樣式，它的position是相對定位，寬度為100%，超出的部分隱藏，高度為500px，表示輪播的高度。接著，.carousel-inner樣式采用絕對定位，寬度為300%，表示三張圖片的寬度總和，高度100%，且采用transform屬性實現滑動效果。而.carousel-item樣式定義了輪播中每一張圖片的樣式，它們的寬度為33.33333%，背景色為灰色，圖片充滿整個.carousel-item。

接下來，我們需要用到JavaScript來實現輪播效果。代碼如下：

var items = document.querySelectorAll('.carousel-item');
var currentItem = 0;
setInterval(function() {
currentItem = (currentItem + 1) % items.length;
document.querySelector('.carousel-inner').style.transform = 'translateX(-' + currentItem * 100 / items.length + '%)';
}, 3000);

其中，我們用querySelectorAll()選擇器選擇了所有的.carousel-item元素，用currentItem來記錄當前顯示的圖片索引。然后，我們采用setInterval()函數，讓輪播循環執行。在這個函數中，我們將currentItem加1，并用取余運算符實現了循環。接著，我們利用translateX()方法來實現輪播效果。

到此，我們已經完成了一個基本的HTML滑動輪播效果。