旋转木马外部的旋转木马控件

Question

我正试图制作一个带有控制箭头的旋转木马，但无论我尝试什么，箭头都不会出来。如果我把控件代码放在旋转木马之外，它就可以工作，但它们在旋转木马的两侧没有正确对齐。

以下是HTML上的控件代码：

<a class="carousel-control-prev" href="#carouselControles" role="button" data-slide="prev">
<span class="icon-prev bi bi-chevron-left font-mainColor-s1" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControles" role="button" data-slide="next">
<span class="icon-next bi bi-chevron-right font-mainColor-s1" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

这是CSS代码：

#myCarousel {
margin-left: 50px; 
margin-right: 50px;
}
.carousel-control {
top: 50%;
margin: 50px;
}
.carousel-control-prev {
margin-left: -25px;
}
.carousel-control.next {
margin-right: -25px;
}

这就是我想要的：

示例

感谢您的帮助。谢谢

Answer 1

试试这个：

.carousel-control {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50px, -50px);
display: flex;
justify-content: space-between;
align-items: center;
}

此code将箭头容器定位在转盘的中间，并将箭头定位在转盘的每个边缘

1-注意：您可以通过减小的宽度来定位彼此最近的箭头

2-注意：如果容器位置不在正确的位置，您可以通过更改以下代码的值来编辑它：transform: translate(-50px, -50px);这取决于您想要的轴