實現這種輪播的基本原理是將兩張圖片分別放在頁面的不同位置，然后使用 CSS3 的動畫和過渡效果來讓圖片在頁面上滑動。用戶可以在頁面上使用手指或者鼠標來滑動圖片。

下面是一個簡單的 CSS3 輪播代碼示例：

```html

```css

.slideshow {

position: relative;

width: 300px;

height: 300px;

position: absolute;

width: 100%;

height: auto;

top: 0;

left: 0;

background-size: cover;

transition: all 0.3s ease;

background-size: cover;

在上面的代碼中，我們使用了 CSS3 的 `position` 屬性來設置圖片的相對位置。`width: 100%;` 和 `height: auto` 屬性來設置圖片的寬度和高度均為其容器的寬度，使其保持自適應布局。`top: 0;` 和 `left: 0;` 屬性來設置圖片的初始位置。`transition` 屬性來設置圖片的滑動效果，其中 `all` 屬性表示所有狀態的變化，` ease` 屬性表示變化的速度。

最后，我們使用 `active` 偽類來設置圖片輪播的當前狀態，其中 `top` 和 `left` 屬性分別為圖片的初始位置和滑動后的位置。