Блог

В настоящее время я работаю над финальным проектом учебного лагеря по программированию, и есть только одна вещь, которую я, кажется, не могу понять (не уверен, возможно ли это).

У меня есть список действий, где я отображаю каждое действие в карточку (которая отлично работает). Теперь я хотел бы поместить эти карточки в 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;
 

Перед использованием Карусели.Тег элемента, вы должны использовать тег Carousel .