Question

你好，我有一个轮播以及上一个和下一个按钮

我需要将它们留在设置了最大宽度的容器内

但是我不明白代码：

  <CarouselProvider
    visibleSlides={1}
    totalSlides={6}
    step={1}
    naturalSlideWidth={400}
    naturalSlideHeight={500}
    hasMasterSpinner
  >

    <div className="root">
      <Slider className="slider">
        <Slide index={0}>
          <Image  style={{maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={1}>
          <Image style={{maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={2}>
          <Image style={{ maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={3}>
          <Image style={{ maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={4}>
          <Image style={{ maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={5}>
          <Image style={{ maxHeight: 500}}src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
      </Slider>
      <Container className="containerButtons">
      <ButtonBack className="buttonBack">Back</ButtonBack>
      <ButtonNext className="buttonNext">Next</ButtonNext>
      </Container>
    </div>
    <DotGroup className="dotGroup" />
  </CarouselProvider>

css：

.slider{
  max-height: 500px;
}
.dotGroup {
  text-align: center;
}

.innterClass {
  height: 500px !important;
}
.containerButtons {
  width: 100%;
  background: darkcyan;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.root{
  height: 100px;
  background: lightgray;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
}

.buttonBack,.buttonNext {
  color: white;
  background: red;
}

图片： enter image description here

我基本上以为

将主容器声明为相对容器

和绝对按钮容器可以解决，但没有用

Answer 1

您可以根据需要进行修改。

NumberN

(r, i) -> r * Character.getNumericValue(i)

如果要在中心向左和向右箭头。

.containerButtons {
  background: darkcyan;
  display: flex;
  justify-content: space-between;
}
.buttonBack,.buttonNext {
  color: red;
}

<div class="containerButtons">
    <button class="buttonBack">Back</button>
    <button class="buttonNext">Next</button>
 </div>

反应箭头位置/ CSS

1 个答案: