React Parallax响应式背景图片无法正常工作，无法沿滚动方向移动

如何解决React Parallax响应式背景图片无法正常工作，无法沿滚动方向移动

我试图存档的是水平视差效果。我有/想要一张覆盖整个页面的大背景照片，我想在用户滚动时滑动，只是关于滑动量的确切像素数。 （响应，如果我有3个，每个滚动条占33％等）。同样，当用户访问移动版本的页面时，事情将以完全相同的方式进行，但方向将是垂直的。我为此使用了react-parallax，但是我无法使其工作。现在只有幻灯片移动。

我的CSS

  background-image: url(./Assets/DavidRotate.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: background 300ms ease-in 200ms;
}

.fade-in {
  background-image: url(./Assets/DavidRotate.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}
.slide {
  width: 100vw;
  height: 100vh;
}

.bg {
  width: 100vw;
  height: 100vh;
  background-image: url(./Assets/DavidRotate.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  top: 0px;
  left: 0px;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  /*position: absolute;*/
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  top: 0px;
  left: 0px;
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

::-webkit-scrollbar {
  display: none;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.one {
  background: #efdefe;
  opacity: 0.5;
}
.two {
  background: #a3f3d3;
  opacity: 0.5;
}
.three {
  background: #0bbaa0;
  opacity: 0.5;
}
.four {
  background: #00dfdf;
  opacity: 0.5;
}

还有我的.JS

import { Parallax,Background } from "react-parallax";
import ReactDOM from "react-dom";
import imagen from "./Assets/David.jpg";

function App() {
  return <Container></Container>;
}

const Container = () => (
  <Parallax strength={100}>
    <Background>
      <div className="bg" />
    </Background>
    <div className="outer-wrapper">
      <div className="wrapper">
        <div className="slide one">test</div>
        <div className="slide two">test2</div>
        <div className="slide three">test3</div>
        <div className="slide four">test4</div>
      </div>
    </div>
  </Parallax>
);

export default App;
ReactDOM.render(<App />,document.getElementById("root"));