Css 反应js旋转木马箭头/位置

你好，我很难把我的箭头放在旋转木马的中间，一个在左边，一个在右边 有人能帮我吗

现在我有了这个

我的代码：

  <Visibility
                onBottomPassed={()=>stickTopMenu()}
                onBottomVisible={()=> unStickTopMenu()}
                once={false}
          > 
        <Grid style={{backgroundColor:'#000',paddingTop:0}}>
        <Grid.Row columns={1} style={{padding:0}}>
          <Grid.Column style={{padding:0}}>
          <ImageCarousel />
          </Grid.Column>
        </Grid.Row>
        </Grid>
        </Visibility>

stickTopMenu（）}
onBottomVisible={（）=>unStickTopMenu（）}
once={false}
> 

以及：

const ImageCarousel=（）=>(
返回
下一个
);

也许您应该添加对父元素的引用。另外，请记住必须变换X和Y

const ImageCarousel = () => (
  <CarouselProvider
    totalSlides={3}
    naturalSlideWidth={1}
    naturalSlideHeight={1}
    style={{position: "relative" }}
  >
    <Slider style={{ maxHeight: "500px"}}>
      <Slide  tag="a" index={0}>
        <Image   src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide tag="a" index={1}>
        <Image src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide tag="a" index={2}>
        <Image src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <ButtonBack style={{position: 'absolute', top:'50%',left: 20,transform: 'translate(-50%,-50%)'}}>Back</ButtonBack>
    <ButtonNext style={{position: 'absolute', top:'50%',right: 20,transform: 'translate(-50%,-50%)'}}>Next</ButtonNext>
  </CarouselProvider>
);

const ImageCarousel=（）=>(
返回
下一个
);

非常感谢。我怎样才能将这两个按钮集中在一个容器中呢？没问题。所以我不确定你所说的容器中心是什么意思。是旋转木马提供的集装箱吗？如果是，请增加左右值。基本上，我想放一个语义容器，一个放在flex end，一个放在flex start，如果你能帮我写这篇文章的话

const ImageCarousel = () => (
  <CarouselProvider
    totalSlides={3}
    naturalSlideWidth={1}
    naturalSlideHeight={1}
    style={{position: "relative" }}
  >
    <Slider style={{ maxHeight: "500px"}}>
      <Slide  tag="a" index={0}>
        <Image   src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide tag="a" index={1}>
        <Image src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide tag="a" index={2}>
        <Image src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <ButtonBack style={{position: 'absolute', top:'50%',left: 20,transform: 'translate(-50%,-50%)'}}>Back</ButtonBack>
    <ButtonNext style={{position: 'absolute', top:'50%',right: 20,transform: 'translate(-50%,-50%)'}}>Next</ButtonNext>
  </CarouselProvider>
);