CSS图像滑块 - 无法转到下一张图像

Question

有人可以帮我解决以下问题吗？

元素定位正确但箭头不会更改图像。只显示图像1，它似乎卡在那里。

提前致谢！

HTML

<div class="carousel-wrapper">
<span id="target-item-1"></span>
<span id="target-item-2"></span>
<span id="target-item-3"></span>

<!-- Start carousel items-->
<div class="carousel-item item-1">
<a class="arrow arrow-prev" href="#target-item-3"></a>
<a class="arrow arrow-next" href="#target-item-2"></a>
</div>

<div class="carousel-item item-2">
<a class="arrow arrow-prev" href="#target-item-1"></a>
<a class="arrow arrow-next" href="#target-item-3"></a>
</div>

<div class="carousel-item item-3">
<a class="arrow arrow-prev" href="#target-item-2"></a>
<a class="arrow arrow-next" href="#target-item-1"></a>
</div>
</div>

CSS（只留下关键部分）

.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
border-radius: 10px;
}

.carousel-wrapper [id^="target-item"] {
display: none;
}

.carousel-wrapper *:target ~ .item-1 {
opacity: 0;
}

.carousel-wrapper #target-item-1:target ~ .item-1 {
opacity: 1;
}

.carousel-wrapper #target-item-2:target ~ .item-2, .carousel-wrapper #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}

建议是否有更好的方法来实现不需要javascript的响应式图像滑块（带箭头）。一直在寻找容易实现的轻量级解决方案。