反应引导轮播

Question

我目前正在进行编码训练营的最终项目，但我似乎无法弄清楚一件事（但不确定是否可能）。

我有一个活动列表，我将每个活动映射到一张卡片中（效果很好）。现在我想将这些卡片放入 React Bootstrap Carousel 并一次显示 4 张卡片。当我按下其中一个指示器时，它应该滑到下一张（或上一张）卡片（而不是接下来的 4 张卡片）。我唯一能开始工作的就是在轮播中有 1 张卡片。

希望有人可以帮助我。

感谢您从非开发人员到即将成为 noobDeveloper。

这是我的代码：

import React, { useState, useEffect } from "react";
import "./Cardslider.css";
import Explorecard from "./Explorecard/Explorecard";
import axios from "axios";
import Carousel from "react-bootstrap/Carousel";

function createCard(area) {
  return (
    <Carousel.Item>
      <div>
        <Explorecard image={`images/${area.area}.jpg`} title={area.area} />
      </div>
    </Carousel.Item>
  );
}

const Cardslider = (props) => {
  const [listOfActivities, setListOfActivities] = useState([]);

  const getAllActivities = () => {
    axios
      .get("http://localhost:9999/activities")
      .then((responseFromApi) => {
        console.log(responseFromApi);
        setListOfActivities(responseFromApi.data);
      })
      .catch((error) => console.error(error));
  };

  useEffect(getAllActivities, []);

  return (
    <div className="cards-container">
      <Carousel className="explore-card-carousel" indicators={false}>
        {listOfActivities.map(createCard)}
      </Carousel>
    </div>
  );
};

export default Cardslider;

Answer 1

在使用 Carousel.Item 标签之前，您必须使用 Carousel 标签。