无法用点自定义 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 是最好的选择，它支持几乎所有的浏览器，有很多选项我建议 OwlC 而不是 BS 滑块。一些例子：

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

Answer 2

将以下内容添加到您导入到项目中的 css 文件中就足够了。如果你运行应用程序并构建它，你可以通过查看标签轻松地使用 css 来完成它。

.carousel .carousel-indicators button {

  background-color: #3c9feb;

  border: none;

  border-radius: 50%;

  width: 10px;

  height: 10px;

}

Answer 3

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

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. 自定义React-boostrap Carousel时出现的array indexing error参见handleSelect回调函数中的注释。上面的 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;

}

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

.carousel-control-prev {

    width: 10%;

    margin-bottom: 30px;

}

.carousel-control-next {

    width: 10%;

    margin-bottom: 30px;

}

Answer 4

您可以自定义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 5

对于仍然需要答案的任何人，我将整个轮播组件放在一个 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;

}