美文网首页我爱编程
React轮播-----react-bootstrap

React轮播-----react-bootstrap

作者: Evan_zhan | 来源:发表于2017-08-23 18:09 被阅读0次

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;

相关文章

网友评论

    本文标题:React轮播-----react-bootstrap

    本文链接:https://www.haomeiwen.com/subject/adljdxtx.html