如何解决我将如何使用 react-bootstrap carousel 实现 3 col carousel?
我想创建一个动态图像滑块,每次轮播上显示 3 个项目时,当我单击轮播上的 nextIcon 时,第一个项目将返回上一部分,第二个项目将设置在第一列第三个项目将设置在第二列,下一个项目将在第三列。如果点击prevIcon,则会发生相反的事情。 并且图片来源将来自数据库。
在下面的代码片段中,我使用 react-bootstrap 库实现了 1 列动态轮播。
render() {
return (
<Carousel activeIndex={this.state.index} onSelect={this.handleSelect}>
{ this.state.users.map(function(user,index)
{
return(
<Carousel.Item key= {index} >
<img
className="d-block w-100"
src= { user.thumbnailUrl }
alt= "Load Images"
/>
<Carousel.Caption>
<h3> { user.title }</h3>
</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。