不可能用点自定义 react-bootstrap 轮播

Question

我正在使用来自react-bootstrap 的轮播，它对我来说很好，但我唯一不能自定义的是：

• 箭头
• 指标线

我只想将箭头颜色从白色透明更改为橙色，并希望将线条替换为点。

        <Carousel className="home-slider">
          {
            LIST.map((classitem) => 
              <Carousel.Item className="home-slider-item">
                  <img
                    className="slider-item"
                    src={classitem.classpic[0]}
                    alt="Slide"
                  />
                  <Carousel.Caption className="slider-item-content">
                    <h3>{classitem.title}</h3>
                    <p>{classitem.desc}</p>
                    <div className="slider-button">
                    <BlueButton link_href={`/classdetails?id=${classitem.id}`} text="Discover" />         
                    </div>
                    </Carousel.Caption>
                </Carousel.Item>
              )            
          }
      </Carousel>

css 是：

.home-slider {
    width: 70%;
    margin-left: 20%;
    margin-right: 10%;
}

.home-slider h3{
    font-size: 24px;
    color: white;
    text-align: left;
    font-family: Fredoka One;
}

.home-slider p{
    font-size: 16px;
    color: white;
    font-weight: normal;
    text-align: left;
    font-family: Source Sans Pro;
}

.slider-item {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    object-fit: cover;
}

.slider-item-content {
    margin-bottom: 40px;
    border-radius: 20px;
    background-color: #ff725590;
    padding: 10px 10px 10px 10px;
}

.slider-button {
    text-align: left;
    margin-top: 50px;;
}

这就是我所拥有的：

知道如何将线改为点并更改箭头的颜色吗？

谢谢

Answer 1

owl carousel 没有回答关于 React-bootstrap Carousel 的问题。要在 React-bootstrap 的 Carousel 组件中呈现一组动态的自定义幻灯片和指示器，您需要做很多事情。从their website 的说明开始，我会这样做：

function CustomReactCarousel(props) {
  const { items } = props;
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    //React-bootstrap carousel has an indexing error that causes blank slides 
    //(probably happens when you customize it). 
    //You need to account for it in this callback...
    //adjust index to 0 if selectedIndex is greater than index of last slide or 
    //it is less than zero
    //remember slide indexes are zero-based
    if (selectedIndex >= items.length || selectedIndex < 0 ){
        setIndex(0);
    } else if (selectedIndex !== index) {
        setIndex(selectedIndex);
    }
  };

  return (
    <Carousel 
        activeIndex={index} 
        onSelect={handleSelect}
        controls={true}
        nextIcon={<span aria-hidden="true" className="fas fa-chevron-right fa-3x customNextClass"/>}
        prevIcon={<span aria-hidden="true" className="fas fa-chevron-left fa-3x customPrevClass"/>}
        indicators={false}
        interval={5000}
    >
        {Items.map((item,itemIndex) => {
            return(
                <Carousel.Item className={"home-slider-item "+ item.itemSliderClass}>
                    <img
                        className={"slider-item "+ item.itemImgClass}
                        src={item.classpic[0]}
                        alt="Slide"
                    />
                    <Carousel.Caption className={"slider-item-content "+ item.itemCaptionContent}>
                        <h3>{item.title}</h3>
                        <p>{item.desc}</p>   
                    </Carousel.Caption>
                </Carousel.Item>
             )
        })}
        <ol className="carousel-indicators">
              {items.map((item, itemIndex) => {
                  return (
                      <li
                          key={index}
                          onClick={() => this.handleCarouselSlide(itemIndex,null)}
                          className={((itemIndex === index) ? "active" : "")+" "+item.itemIndicatorClass}/>
                  );
               })}
          </ol>
    </Carousel>
  );
}

render(<CustomReactCarousel />);

注意事项：

1. 我将您的LIST 更改为items 并将其作为道具。我假设它是您想要在轮播中显示的自定义对象的列表。
2. 我创建了一个函数，如 React 指令中所示 容纳回调等。
3. 确保在添加自己的列表时使用indicators={false} 的指标。否则，组件将创建两个列表。
4. 请注意“活动”类必须如何根据 在自定义指标列表中选择索引。
5. 查看 handleSelect 回调函数中的 cmets 关于 自定义 React-boostrap 时出现的数组索引错误 旋转木马。上面的 handleSelect 回调应该可以修复该错误。

如果您想设置指示器按钮的样式，Beu 是正确的。通过引用他们的.carousel-indicators 类来设置它们的样式（无论您是否自定义）。请注意，<ol className="carousel-indicators"> 即使在上面显示的自定义指标列表中也会保留此类名称。

.carousel-indicators li {
  background-color: gray;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.carousel-indicators li.active {
  background-color: #333;
  width: 12px !important;
  height: 12px !important;
}

除了新的自定义 prev 和 next 图标以及它们在那里执行的本地样式之外，您还可以在 css 中设置它们的区域。为此，请参考 .carousel-control-prev 和 .carousel-control-next 类：

.carousel-control-prev {
    width: 10%;
    margin-bottom: 30px;
}

.carousel-control-next {
    width: 10%;
    margin-bottom: 30px;
}

Answer 2

你可以自定义css来获取它

.carousel-indicators li {
  background-color: gray;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.carousel-indicators li.active {
  background-color: #333;
  width: 12px !important;
  height: 12px !important;
}

Answer 3

对于仍然需要答案的任何人，我将整个轮播组件放在一个 div 中并使用 is CSS 来设置指示器（按钮）的样式，对于箭头我没有答案。我正在使用 react-boostrap v2.0

.carouselDiv >div >div >button{
    background-color: black!important;
    border-radius: 50% !important;
    height: 12px!important;
    width: 12px!important;
}

Answer 4

使用 owl carousel 是最好的选择，它支持几乎所有浏览器，有很多选项，我建议 OwlC 比 BS 滑块。 一些例子：

`https://codepen.io/tag/owl%20carousel/`