使用 react-bootstrap 轮播如何使用 css 修改默认图标和指示器？

问题描述

我会有类似的东西：

function NewCarousel() {
  return (
    <Carousel>
      <Carousel.Item interval={800}>
        <img
          width={900}
          height={500}
          className="d-block w-100"
          src={HeaderBackground}
          alt="First slide"
        />
        <Carousel.Caption>
          <div className="slider-content">
            <div className="col-md-12 text-center">
              <h1 className="animated3">
                <span>Ask more questions</span>
              </h1>
              <p className="animated2">
                Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <a
                href="#feature"
                className="page-scroll btn btn-success animated1 button2"
              >
                Read More
              </a>
            </div>
          </div>
        </Carousel.Caption>
      </Carousel.Item>

      <Carousel.Item>
        <img
          className="d-block w-100"
          width={900}
          height={500}
          src={HeaderBackground2}
          alt="Second slide"
        />

        <Carousel.Caption>
          <div className="slider-content">
            <div className="col-md-12 text-center">
              <h1 className="animated2">
                <span>
                  Lorem ipsum dolor sit amet,sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </span>
              </h1>
              <p className="animated1">
                Lorem ipsum dolor sit amet,sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <a
                className="animated3 slider btn btn-success btn-min-block button2"
                href="#sign-up"
              >
                Sign Up
              </a>
              <a
                className="animated3 slider btn btn-light btn-min-block button2"
                href="#log-in"
              >
                Login
              </a>
            </div>
          </div>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
      );
    }

    export default NewCarousel;

而且我发现我可以改变箭头的颜色，比如：

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='orange' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
 }
 
 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='orange' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
 }

但是如果我想使用不同的图标怎么办？或者更改大小或其他一些属性？

如果我添加这个css：

 .carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  font-weight: bolder;
  color: #5BB12F;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-weight: bolder;
  font-size: 55px;
  color: #5BB12F;
}

它只是添加了第二个图标，这不是我想要的。

与指标类似，我已经尝试过这个，但似乎不起作用：

 .top-content .carousel-indicators li {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #c593d8;
  border-radius: 50%;
}

如果有人能给我一个正确的方向，我将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）