title: React Bootstrap Carousel
body: <p>I am currently working on the final project of a coding Bootcamp and there's just one thing that I can't seem to figure out(not sure if it is possible though).</p>
  <p>I have a list of activities, where I map every activity into a card (which works fine). Now I would like to put these cards into the React Bootstrap Carousel and show 4 cards at a time. When I press one of the indicator it should slide to the next (or previous) card (not the next 4 cards). The only thing that I can get to work is having 1 card in the carousel.</p>
  <p>Hoping that there is someone out there who is able to help me out.</p>
  <p>Thank you from a nonDeveloper to a soon to become noobDeveloper.</p>
  <p>Here's my code:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./Cardslider.css&quot;;
  import Explorecard from &quot;./Explorecard/Explorecard&quot;;
  import axios from &quot;axios&quot;;
  import Carousel from &quot;react-bootstrap/Carousel&quot;;
  
  function createCard(area) {
    return (
      &lt;Carousel.Item&gt;
        &lt;div&gt;
          &lt;Explorecard image={`images/${area.area}.jpg`} title={area.area} /&gt;
        &lt;/div&gt;
      &lt;/Carousel.Item&gt;
    );
  }
  
  const Cardslider = (props) =&gt; {
    const [listOfActivities, setListOfActivities] = useState([]);
  
    const getAllActivities = () =&gt; {
      axios
        .get(&quot;http://localhost:9999/activities&quot;)
        .then((responseFromApi) =&gt; {
          console.log(responseFromApi);
          setListOfActivities(responseFromApi.data);
        })
        .catch((error) =&gt; console.error(error));
    };
  
    useEffect(getAllActivities, []);
  
    return (
      &lt;div className=&quot;cards-container&quot;&gt;
        &lt;Carousel className=&quot;explore-card-carousel&quot; indicators={false}&gt;
          {listOfActivities.map(createCard)}
        &lt;/Carousel&gt;
      &lt;/div&gt;
    );
  };
  
  export default Cardslider;
  </code></pre>