如何用图像替换默认轮播指示器？答案

【问题标题】：How can I replace the default carousel indicators with images?如何用图像替换默认轮播指示器？
【发布时间】：2022-01-06 11:13:32
【问题描述】：

当我创建轮播时，如果我没有设置indicators={false}，它会自动显示指标。但我在代码中看不到。我想用产品图片更改carousel indicators。如何访问indicators？我在react-bootstrap docs 中找不到该怎么做。

<Carousel className='productCarousel' interval={null}>
    {product.images.map( image => 
        <Carousel.Item className='carouselItem'>
            <Image src={image} alt={product.name} fluid/>
        </Carousel.Item>
    )}
</Carousel>

【问题讨论】：

标签： reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

只需在.carousel-control-prev 和.carousel-control-next 上更改background-image 的CSS。您可以通过检查浏览器中的箭头来看到这一点。

/* original */
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* custom */
.carousel-control-next-icon {
  background-image: url('https://i.stack.imgur.com/WrGe5.png');
}

.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: 0 0;
  border: 0;
  opacity: .5;
  transition: opacity .15s ease;
  background: #111; /* demo only */
}

.carousel-control-next {
  right: 0;
}

.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

&lt;a class="carousel-control-next" role="button" tabindex="0"&gt;&lt;span aria-hidden="true" class="carousel-control-next-icon"&gt;&lt;/span&gt;&lt;/a&gt;

【讨论】：