Javascript 如何减少旋转木马上显示的图像数量？

我有一个旋转木马，它使用lib

react responsive carousel

渲染一些图像，我想知道如何减少旋转木马中出现的图像数量

在大屏幕上，我在旋转木马上渲染3个图像，但当屏幕变小时，我希望渲染更少的图像。在下图中，当屏幕很小时，很容易看到旋转木马与粘贴的图像在一起

我把我的代码放入

从“React”导入React；
导入“/styles.css”；
从“/carousel.data”导入{images}”；
导入“react responsive carousel/lib/styles/carousel.min.css”；
从“反应响应旋转木马”导入{Carousel}；
导出默认函数App（）{
const renderItems=images.map（（img）=>{
返回(
案例名称
案例字幕
);
});
返回(
{renderItems}
);
}

感谢您上传CodeSandbox。因此，我查看了旋转木马组件的工作原理，它似乎正在使用

renderItems

数组中

要在CSS中显示不同数量的项，可以使用以下操作

/*对于所有其他屏幕尺寸，显示3项*/
.幻灯片{
最小宽度：33%！重要；
}
/*对于宽度小于600px的屏幕，显示2项*/
@仅介质屏幕和（最大宽度：600px）{
.幻灯片{
最小宽度：50%！重要；
}
}

---

要使用的宽度百分比基本上相当于

100/numItemsToShow

，并且来自包中的宽度百分比。使用

通常不是最佳做法！重要信息

，因此我建议您探索是否可以找到直接覆盖react responsive carousel packages样式表的方法。

您可以尝试在图像上设置

最小宽度

。

/* For all other screen sizes, display 3 items */
.slide {
  min-width: 33% !important;
}

/* For screens with width < 600px, display 2 items */
@media only screen and (max-width: 600px) {
  .slide {
    min-width: 50% !important;
  }
}