从 React-bootstrap 在 Carousel 中的过渡不顺利答案

【问题标题】：Transition in Carousel from React-bootstrap not smooth从 React-bootstrap 在 Carousel 中的过渡不顺利
【发布时间】：2021-03-19 23:26:02
【问题描述】：

嘿 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;

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

谢谢。

【问题讨论】：

标签： reactjs carousel react-bootstrap

【解决方案1】：

请安装react-bootstrap版本2。这个故障已经在版本2中解决了。只需将package.json更改为给定的代码sn-p

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

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

【讨论】：