Carousel外部的Carousel控件

Question

我正试着用控制箭头在它外面做一个旋转木马，但是不管我怎么试，箭头都出不来。如果我将控件代码放在carousel之外，它可以工作，但它们在carousel的边上不能正确对齐。

下面是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;
}

这是我想要的样子：

Example

任何帮助都是非常感谢的。谢谢。

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);它取决于您想要的轴