响应响应-在移动视图中，旋转木马在自身下方有多余的空白。

Question

我使用的是react-responsive-carousel，当我切换到移动视图时，下面有一堆空白。我已经尝试了我能想到的一切来删除它，包括body { overflow-x: hidden }。当查看开发工具时，似乎是ul.slider.animated。

在图像旋转木马下面显示空白

这里是一个代码盒，我的问题转载。

Answer 1

更新：

我刚刚看过你的例子，这不是我的问题，所以我下面的答案不适用于这个特定的问题。

关于您的实际问题，我认为这更多地是一个一般的响应性问题，而不是任何特定于react-responsive-carousel的问题。之所以出现空白，是因为您已经将旋转木马幻灯片的高度硬编码为90vh，因此只有一小部分页面大小，其中旋转木马幻灯片的高宽比与图像的纵横比兼容，导致图像下方没有空白。

这是我的解决方案，虽然这意味着页脚不再固定在底部。

1. 从min-height: 100vh;中删除.page-container中的styles.css
2. 从height: 90vh;中删除.carousel .slide中的carousel.css
3. 从.carousel .previous { height: 90vh; }底部的媒体查询中删除carousel.css。

这将不再限制旋转木马到一个固定的高度，并将删除空白，允许页脚总是加入底部的旋转木马。如果您确实希望页脚位于底部，那么另一个可能的选项是在position: fixed;中设置footer.css并在切换到移动模式时使用纵向图像。但同样，你将不得不混乱的比例和纵横比，虽然不是在同样的程度上，只有景观图像。

旧的(和无关的)答案：

我有一个类似的问题，对我起作用的是将showThumbs的道具设置为false，如下所示：

<Carousel showThumbs={false} />

要获得更多信息，在dev工具中要查找的内容如下：

<div class="carousel-root">
    <div class="carousel carousel-slider">...</div>
    <div class="carousel">
        <div class="thumbs-wrapper axis-vertical">...</div>
    </div>
<div>

<div class="carousel carousel-slider">是您的内容所在的主要位置，<div class="thumbs-wrapper axis-vertical">可能是一排缩略图。设置showThumbs={false}将移除第二个div。