反应js轮播和职位

Question

你好，我有一个旋转木马，但根据旋转木马的大小，我无法将图像100％保留

groupby

现在我有这个了

Answer 1

嗨，这个容器应该很漂亮。

1-在ImageCarousel.js的同一文件夹中创建一个名为“ ImageCarousel.css”的css文件，并将代码放在下面：

.innterClass {
    height: 500px !important;
}

2-导入代码ImageCarousel.js

import "./ImageCarrousel.css";

3-这是您在ImageCarousel组件中应具有的代码：

const ImageCarousel = () => (
  <CarouselProvider
  totalSlides={3}
  naturalSlideWidth={1}
  naturalSlideHeight={1.25}
  dragEnabled={false}
  touchEnabled={false}
  style={{ height: "500",position: "relative"}}
  >
    <Slider style={{maxHeight:'500px'}}>
      <Slide innerClassName="innterClass" index={0}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide innerClassName="innterClass" index={1}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide innerClassName="innterClass" index={2}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <ButtonBack style={{position: 'absolute',top:'50%',left:'30%' ,transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow right' size='big' /></ButtonBack>
    <ButtonNext style={{position: 'absolute', right:'30%', top: "50%", transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow left' size='big' /></ButtonNext>

  </CarouselProvider>
);