reactjs - Adding Bootstrap carousel did not work on Gatsby JS

Question

I was trying to add Bootstrap carousel on my Gatsby app using the ff code:

{ testimonials.map((item => {
const { id, name, word, photo } = item

return(

  <div className="carousel-item" key={id}>
    <Image fluid={photo.childImageSharp.fluid} alt={name} className="d-block mx-auto" />
    <div className="carousel-caption d-md-block">
      <p>{ word }</p>
      <h5>{ name } </h5>
    </div>
  </div>
   )

 }))
}

   </div>

<ol className="carousel-indicators">
   { [...Array(testimonials.length).keys()].map(idx => {
      return <li data-target="#testimonialCarousel" data-slide-to={idx}></li>
   })
   }
  </ol>

</div>

But this one returns a blank canvas. I am not sure why but I did not see any error on the console. If try remove all codes of bootstrap and try one item from list such as name, its show all but using bootstrap carousel did not work.

Note: I know that there is a react-bootstrap there, but I choose to use the raw bootstrap for my easy customization

Any idea how to fix this?

question from:https://stackoverflow.com/questions/65948268/adding-bootstrap-carousel-did-not-work-on-gatsby-js

Answer 1

According to Bootstrap v4, your structure should look like

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
   {testimonials.map((item => {
     console.log("item, item) // <-- check the data and the nested objects here
     return  <div class="carousel-item active">
       <Image fluid={photo.childImageSharp.fluid} alt={name} className="d-block mx-auto" />
       <div class="carousel-caption d-none d-md-block">
         <h5>...</h5>
         <p>...</p>
       </div>
     </div>
   }
</div>

Check that the data is being fetched properly with the console.log above.

Keep also in mind, that the .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.