反应灵敏的转盘高度调整不正确

时间:2018-09-07 04:59:57

标签: javascript reactjs carousel

我正在使用反应灵敏的旋转木马,它变得很奇怪

render() {
    return (
      <div className="slider-container">
        <Carousel className="carousel-style" showArrows={true} showThumbs={false} showStatus={false}>
          {this.generateCards()}
          <div className="slider-item-div">
            Test
          </div>
        </Carousel>
      </div>
    );
  }

这是CSS

.slider-container {
    width: 100%;
    height: 100%;
}

.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}

.carousel-style {
    height: 100% !important;
}

不幸的是,这就是它呈现的样子

enter image description here

我想让高度== 100%并填满整个屏幕。另外,我希望显示左右箭头时不要将它们悬停在此处,例如: http://react-responsive-carousel.js.org/#demos

3 个答案:

答案 0 :(得分:0)

如果您希望该轮播显示在屏幕上,则可以通过以下CSS调整来实现:

.slider-container {
width: 100%;
height: 100%;

/* Add this */
position:fixed;
top:0;
left:0;

}

答案 1 :(得分:0)

更改CSS和滑块容器的固定位置

.slider-container {
    width: 100%;
    height: 100%;
    position:fixed; /* add this code for position fixed */
    top:0px; /* set top and left 0 */
    left:0px;
}
.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}
.carousel-style {
    height: 100% !important;
}

答案 2 :(得分:0)

这实际上可能是一个错误,因为当我明智地更改高度像素时,它会进行调整,但是如果我为与父级匹配而按百分比进行操作,则不会执行任何操作