React响应式走马灯高度未正确调整

Question

我正在使用React响应式走马灯，但它的渲染效果很奇怪。

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

不幸的是，它呈现为以下内容：

我希望高度等于100％并填充屏幕。 我也想显示右侧和左侧的箭头，就像这里：http://react-responsive-carousel.js.org/#demos

- Gooby

---

为什么不试试 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 这将有助于查看您的HTML是否正确呈现！ - Faisal Alvi

Answer 1

如果您希望此轮播图占据整个屏幕，则以下CSS调整应该可以实现：

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

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

}

- Dacre Denny

Answer 2

这可能是一个bug，因为当我逐像素改变高度时，它会调整，但如果我按百分比匹配父级，它就不起作用了。

- Gooby

Answer 3

修改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;
}

- Suhas Bachhav

---

将箭头类的不透明度设置为.carousel .control-arrow{ opacity: 1 !important; }。 - Suhas Bachhav

抱歉我应该更清楚一点。这个滑块在一个父级div中，我希望它能填充整个div。不幸的是，您的建议并没有完全实现这一点。:( - Gooby

Answer 4

如果您不反对覆盖默认的CSS样式，那么您可以创建一个包含以下内容的CSS文件：

.carousel .thumb img {
    width: 100% !important;
    height: 100% !important;
}

.carousel .slide img {
    max-height: 300px;  /* change this to whatever you want */
    width: auto;
}

然后在您的代码中（假设使用ES6语法），您只需通过导入您创建的CSS文件来覆盖默认值。例如：

import React, { Component } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import './style/overrides.css';  // change this to the file path of your overrides

- Sabaoon Bedar