添加 Bootstrap 轮播在 Gatsby JS 上不起作用

如何解决添加 Bootstrap 轮播在 Gatsby JS 上不起作用

我试图使用 ff 代码在我的 Gatsby 应用程序上添加 Bootstrap carousel：

{ 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>

但这会返回一张空白画布。我不知道为什么，但我没有在控制台上看到任何错误。如果尝试删除引导程序的所有代码并尝试从列表中的一项（例如名称），则显示全部但使用引导程序轮播不起作用。

注意：我知道那里有一个 react-bootstrap，但我选择使用原始引导程序来轻松自定义

知道如何解决这个问题吗？

解决方法

根据Bootstrap v4，您的结构应如下所示

<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>

使用上面的 console.log 检查数据是否被正确获取。

还请记住，需要将 .active 类添加到其中一张幻灯片中。否则，轮播将不可见。