純CSS實現左右輪播圖是一種比較簡便的實現方式。下面我們來介紹一下具體的實現方法。

.carousel {
display: flex;
align-items: center;
overflow: hidden;
}
.carousel-inner {
display: flex;
width: 300%;
transition: all 0.5s;
}
.carousel-item {
flex: 1;
margin-right: 20px;
height: 200px;
background-color: #eaeaea;
}
.carousel-item:last-child {
margin-right: 0;
}
.carousel input[type="radio"] {
display: none;
position: absolute;
}
.carousel input[type="radio"]:checked + .carousel-inner {
transform: translateX(-33.33%);
}
.carousel input#carousel-1:checked ~ .prev,
.carousel input#carousel-3:checked ~ .next,
.carousel input#carousel-2:checked ~ .prev,
.carousel input#carousel-1:checked ~ .next {
display: block;
}
.prev,
.next {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
transform: translateY(-50%);
z-index: 1;
display: none;
cursor: pointer;
}
.prev:before,
.next:before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(-45deg);
}
.prev {
left: 0;
margin-left: 10px;
}
.next {
right: 0;
margin-right: 10px;
}

代碼中的.carousel為輪播圖的容器，carousel-inner為輪播圖的內容區，carousel-item為輪播圖的子元素。

實現方法是借助CSS中的flex和translateX屬性，在需要移動的時候通過改變translateX的值來實現元素的移動。同時，配合:checked的狀態來控制輪播圖的左右滑動。

還需要注意的是，通過設置input[type="radio"]的display為none來隱藏輪播圖的觸發按鈕，通過:checked狀態的配合實現輪播圖的控制。

通過上述代碼，我們就可以實現簡單的左右輪播圖效果了。