自定义React bootstrap Carousel指示器活动类

import React from 'react';
import { Carousel } from 'react-bootstrap';
import './CustomCarousel.css'; // 导入自定义的CSS样式文件

const CustomCarousel = () => {
  return (
    <Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="slide1.jpg"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      {/* 其他内容项... */}
    </Carousel>
  );
}

export default CustomCarousel;

/* 自定义指示器的样式 */
.carousel-indicators .active {
  background-color: #f00; /* 活动类的背景颜色 */
}

import React from 'react';
import { Carousel } from 'react-bootstrap';

const CustomCarousel = () => {
  const CustomIndicators = ({ items, activeIndex }) => {
    return (
      <ol className="carousel-indicators">
        {items.map((item, index) => (
          <li
            key={index}
            className={index === activeIndex ? "active" : ""}
          />
        ))}
      </ol>
    );
  };

  return (
    <Carousel indicators={false} nextIcon={null} prevIcon={null} /* 禁用默认指示器和箭头按钮 */>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="slide1.jpg"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      {/* 其他内容项... */}
      <CustomIndicators /> {/* 使用自定义指示器组件 */}
    </Carousel>
  );
}

export default CustomCarousel;