HTML5和CSS3是現代Web前端開發中非常重要的技術，其中輪播圖是網站中常見的頁面交互效果。下面我們來介紹一下如何使用HTML5和CSS3制作輪播圖。

HTML代碼：
<div class="slider">
<div class="slider-container">
<img src="img/slide-1.jpg">
<img src="img/slide-2.jpg">
<img src="img/slide-3.jpg">
</div>
</div>
CSS代碼：
.slider {
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-container {
width: 300%;
height: 400px;
display: flex;
transition: all .5s ease-in-out;
}
.slider-container img {
width: 33.33%;
height: 400px;
}

通過上面的HTML和CSS代碼，我們可以看到輪播圖的基本結構是一個包含所有圖片的容器，以及一個包含這個容器的外層容器。通過CSS的transition屬性實現圖片滑動的效果。我來簡單解釋一下這些代碼的含義：

首先，我們定義了一個類名為.slider的容器，并設置它的寬度、高度和overflow屬性。這里選擇了overflow:hidden，是為了隱藏多余的圖片。

接著，我們定義了一個類名為.slider-container的容器，并設置它的寬度、高度和display屬性。其中，寬度設置為300%，是為了讓這個容器可以同時容納3張圖片。

最后，我們在.slider-container容器中添加了三張圖片，并分別設置它們的寬度、高度。由于我們設置了container的寬度為它的子元素寬度的3倍，并且每張圖片的寬度都是container寬度的1/3，也就是說每張圖片會占用到container寬度的1/3。

使用這些HTML和CSS代碼，我們就可以輕松制作出一個基本的輪播圖。當然，這只是一個最基本的實現方法，你可以根據自己的需要進行擴展和改進。