reactjs - 从 React-bootstrap 到 Carousel 的过渡不顺利

Question

嘿 StackOverflow 编码员，

我正在 React 中从头开始构建我的投资组合并准备部署它，但不幸的是，轮播中的幻灯片转换出现了故障。我已经尝试了改变照片的宽度和高度的所有方法。这是正在发生的事情的视频。 Gif of carousel glitch

接下来，这是组件中的代码。

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;

我已经尝试了所有方法，但仍然出现故障。任何建议就足够了!

谢谢。

Answer 1

请安装react-bootstrap版本 2。此故障已在版本 2 中解决。只需将 package.json 更改为给定的代码片段即可

"dependencies": {
    "react-bootstrap": "^2.0.2"
},

然后运行npm install我希望这能解决您的问题。