将引导轮播指示器更改为项目符号答案

【问题标题】：Changing bootstrap carousel indicators to bullets将引导轮播指示器更改为项目符号
【发布时间】：2021-06-19 23:53:08
【问题描述】：

我正在尝试将左侧的轮播指示器垂直对齐为项目符号点。我从@stackoverflow 那里得到了帮助，几乎对齐了。我面临的一个小问题是，我不知道它是活动指示器还是非活动指示器，每次轮播上的幻灯片更改时都会稍微向右移动。我希望这不会发生。请查看并告诉我缺少什么。

这是我的代码大纲：

HTML：

<section className="site-carousel">
<Carousel>
<Carousel.Item>
    <img className="d-block w-100" src={require("../Assets/Images/hair_salon_1.jpg").default}/>
    <Carousel.Caption>
      <h3>Hair Salon</h3>
      <p className="d-block w-100">Sed ut perspiciatis unde omnis iste natus error sit voluptatem, totam rem aperiam, eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo. totam rem aperiam, eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img className="d-block w-100" src={require("../Assets/Images/hair_salon_2.jpg").default}/>
    <Carousel.Caption>
      <h3>Hair Color</h3>
      <p className="d-block w-100">Sed ut perspiciatis unde omnis iste natus error sit voluptatem, totam rem aperiam, eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo. totam rem aperiam, eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img className="d-block w-100" src={require("../Assets/Images/hair_salon_3.jpg").default}/>
    <Carousel.Caption>
      <h3>Hair Stylists</h3>
      <p className="d-block w-100">Sed ut perspiciatis unde omnis iste natus error sit voluptatem, totam rem aperiam, eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo. totam rem aperiam, eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </Carousel.Caption>
  </Carousel.Item>
  </Carousel>
</section>

CSS

ol.carousel-indicators {
  position: absolute;
  bottom: 2%;
  margin: 0;
  border-radius: 100%;
  right: 95%;
  left: 15%;
  width: 3%;
  display: flex;
  flex-direction: column;
}
ol.carousel-indicators li{
  float: left;
  width: 33%;
  height: 10px;
  margin-bottom: 10px;
  border-radius: 100%;
  border: 0;
  background: yellow;
}

这就是我得到的：

【问题讨论】：

标签： css bootstrap-4 carousel

【解决方案1】：

您在 css 中的逻辑导致的对齐有什么问题。您将点按幻灯片宽度的 95% 向左推，同时将它们向右按幻灯片宽度的 15%。它甚至没有达到幻灯片宽度的 100% :D

ol.carousel-indicators {
  position: absolute;  
  right: 95%;
  left: 15%;  
}

您可以考虑将其编辑为：

ol.carousel-indicators {
  position: absolute;  
  right: 95%; 
}

【讨论】：