我正在使用反应灵敏的旋转木马,它渲染怪异
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
如果您希望此轮播填满屏幕,那么以下CSS调整应该实现:
.slider-container {
width: 100%;
height: 100%;
/* Add this */
position:fixed;
top:0;
left: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;
}
这可能实际上是一个错误,因为当我按像素方式更改高度时,它确实会调整,但如果我为它做百分比以匹配父级它不会做任何事情