问题描述
我试图使用 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
类添加到其中一张幻灯片中。否则,轮播将不可见。