react-bootstrap-carousel映射失效及移除底部指示器问题求助

云原生阿岚

2026-7-23

问题解决方法

一、图片同时显示的问题修复

你当前代码把所有图片都塞进同一个Carousel.Item里，轮播会把这个包裹内容当成单一项，自然会让所有图片同时展示。正确做法是给每张图片单独生成一个Carousel.Item：把Carousel.Item放到map循环内部，让每个图片对应一个独立的轮播项。

二、移除底部滑动指示器

react-bootstrap的Carousel组件自带indicators属性，将其设为false就能关闭底部的指示器圆点。

修改后的完整代码

import React from "react";
import "../../styles/Banner.css";
import Carousel from "react-bootstrap/Carousel";

const data = [
  "https://rukminim1.flixcart.com/flap/1680/280/image/1defb861e409319b.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/8d4150cc4f3f967d.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
];

const Banner = () => {
  return (
    <Carousel className="carasousel" indicators={false}>
      {/* 每个图片对应一个独立的轮播项 */}
      {data.map((imag, i) => {
        return (
          <Carousel.Item key={i}>
            <img src={imag} alt={`轮播图${i+1}`} className="banner_img" />
          </Carousel.Item>
        );
      })}
    </Carousel>
  );
};

export default Banner;