映射在 react-bootstrap-carousel 中不起作用

Question

我正在使用 react bootstrap carousel 。我想在其中使用映射。但它不起作用。有人可以帮我吗

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">
      <Carousel.Item>
        {data.map((imag, i) => {
          return (
            <>
              <img src={imag} alt="img" key={i} className="banner_img" />
            </>
          );
        })}
      </Carousel.Item>
    </Carousel>
  );
};

export default Banner;

它应该一次显示一个项目，但它同时显示所有四个项目。

另一期： 而且我还想从转盘上取下下方的滑动指示器。有什么办法可以去掉吗

Answer 1

你可以试试：

  {data.map((imag, i) => (
      
          <img src={imag} alt="img" key={i} className="banner_img" />
      
    ))}

Answer 2

您可以将 map 函数移到

Carousel.Item

组件之外，并将 map 移到数据上以创建

Carousel.Items

的数组。每个

Carousel.Item

组件只会渲染一张图像。

要移除下部滑动指示器，您可以将

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 = () => {
  const carouselItems = data.map((imag, i) => (
      <Carousel.Item key={i}>
        <img src={imag} alt="img" className="banner_img" />
      </Carousel.Item>
  ));

  return (
    <Carousel className="carasousel" indicators={false}>
      {carouselItems}
    </Carousel>
  );
};

export default Banner;