轮播控件外的轮播控件

Posted 2023-03-21

【中文标题】轮播控件外的轮播控件

【英文标题】：Carousel Controls Outside of Carousel

【发布时间】：2021-12-27 04:04:11

【问题描述】：

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

这是 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

感谢任何帮助。谢谢。

【参考方案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); 这取决于您想要的轴