React js轮播箭头/位置

时间:2019-12-16 01:36:27

标签: css reactjs

您好,我很难将箭头放在圆盘传送带的中心,一个放在左边,另一个放在右边 有人可以帮我吗?

现在我有这个 enter image description here

我的代码:

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

和:

const ImageCarousel = () => (
  <CarouselProvider
    totalSlides={3}
    naturalSlideWidth={1}
    naturalSlideHeight={1}
  >
    <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: 0,transform: 'translateY(-50%)'}}>Back</ButtonBack>
    <ButtonNext style={{position: 'absolute', top:' 50%',left: 0,transform: 'translateY(-50%)'}}>Next</ButtonNext>
  </CarouselProvider>
);

1 个答案:

答案 0 :(得分:1)

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

class code(base):
    def __init__(self):
        base.__init__(self,5)
x=code()
x.hello()