React项目 使用轮播图
React-bootstrap中的轮播(Carousel)模块
参考github: https://github.com/react-bootstrap/react-bootstrap
代码
// 引入轮播模块
import {
Carousel
} from "react-bootstrap";
// 引入图片
import image1 from "./image/image1.png";
import image2 from "./image/image2.png";
...
class Banner extends Component {
render (){
return (
<div className="index-banner-region" style={{ height: height + "px" }}>
<Carousel pauseOnHover={ false }>
<Carousel.Item>
<div className="w1000">
<img
alt="bannerText1"
src={ imag1 }
/>
</div>
</Carousel.Item>
<Carousel.Item>
<div className="w1000">
<img
alt="bannerText1"
src={ imag2 }
/>
</div>
</Carousel.Item>
</Carousel>
</div>
)}
}
export default Banner;