Hey StackOverflow编码器,
我正在React中从头开始构建我的投资组合,并准备部署它,但不幸的是,转盘中幻灯片的转换出现了故障。我已经尝试了一切,从改变照片的宽度和高度。这是一段正在发生的事情的视频。转盘故障Gif
接下来,这是组件中的代码。
import React from "react";
import Carousel from "react-bootstrap/Carousel";
import Slide1 from "../../assets/images/IMG_0261.jpeg";
import Slide2 from "../../assets/images/IMG_0620 (1).jpeg";
import Slide3 from "../../assets/images/IMG_0043.jpeg";
import ScrollDown from "../Scroll-down/scrollDown.component";
const MyCarousel = () => {
return (
<div id="home">
<Carousel controls={false} indicators interval={2500} pause={false}>
<Carousel.Item>
<img
id="slide1"
className="d-block w-100 "
style={{ width: "100%", height: "100%"}}
src={Slide1}
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100 "
style={{ width: "100%", height: "100%"}}
src={Slide2}
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100 "
style={{ width: "100%", height: "100%"}}
src={Slide3}
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
{/* <div className="overlay"></div> */}
<ScrollDown />
</div>
);
};
export default MyCarousel;
我试过了所有的东西,但它仍然出现故障。任何建议都足够了!
谢谢。
请安装react引导程序版本2。此故障已在版本2中解决。只需将package.json更改为给定的代码片段
"dependencies": {
"react-bootstrap": "^2.0.2"
},
然后运行npm install
我希望这能解决你的问题。