问题标签 [pure-react-carousel]

我使用pure-react-carousel库并尝试通过onClick按钮的方法导航到特定幻灯片。

请解释我如何使用setStoreState，因为我试图自己做（如文档中所写）并且我使用它的整个页面都是不可见的。我尝试使用this.props.carouselStore.setStoreState({ currentSlide: 2 }).

当我添加导出 withStore 时，我的页面变得不可见。我得到以下错误。

我需要从库 pure-react-carousel 中更改一种组件样式）。在文档中说它可以通过组件的一些类名样式来完成，如下所示。我知道我必须更改这个类“carousel__dot--selected” 我的问题是下一个 - 我必须在我的组件文件或某些 ccs 文件中定义这个类名？

在此处输入图像描述

我试图在反应中实现一个简单的轮播，我使用了纯 css 和库，但在所有情况下它总是显示如下

结果图片

所有子项都以垂直线显示。

我尝试使用以下代码：

https://www.npmjs.com/package/react-responsive-carousel

https://www.npmjs.com/package/pure-react-carousel

总而言之，结果相同，我在 css 类中没有样式

我不确定如何在纯反应轮播中的幻灯片之间添加“间距”。

有没有简单的选择如何在幻灯片之间添加间隙？我尝试了几种方法。一个接一个地滑动时，我需要正确的填充。使用边距时，在幻灯片或内部元素上应用时，滑块会损坏，将最后一张幻灯片推到新的行块上。

是否可以在 pure-react-carousel 中设置一个属性以使幻灯片显示为“居中”。我试图为此找到一个选项，但没有。

也许我们可以制作一个新的道具centered="true"来实现这个功能？

我们如何/可以在 CSS 中使可见幻灯片的数量响应？/ 不必使用 JS 来visibleSlides根据断点进行更改。

例如; 每张幻灯片都有 min-width: 100px; min-height: 100px;ie。我们希望看到细节的图像不应该小于 100px。

我们设置visibleSlides为 8（用于桌面）。在移动设备上，我们只想显示 2 张幻灯片。因为我们不希望单个幻灯片的高度和宽度小于 100 像素，也不希望幻灯片重叠。

我知道我们可以使用 react 来检查屏幕宽度和设置visibleSlides，但是所有应用程序都可以访问它并不容易，尤其是像 next.js 那样呈现的服务器端。

请参阅此沙箱https://codesandbox.io/s/pure-react-carousel-responsive-visible-slides-k8cui

（来自https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark）

我试图在左侧有一些文本，在右侧有我的纯反应轮播。

旋转木马拉伸以填充其父级的宽度。

如何将 flexbox 调整为 50% 的宽度而没有轮播而不在 y 轴上溢出？

索引.js

Carousel.js（纯反应轮播）

我将react-responsive-carousel用于轮播，当用户拖动并结束拖动元素时，我需要防止打开链接

帮助我

我该怎么做？

小例子我的意思是：

摘要 我正在尝试渲染一些幻灯片，并且幻灯片所在的容器不会隐藏非活动幻灯片。结果是您可以看到所有幻灯片，而只有一张应该可见。此外，幻灯片呈现在容器之外。

尝试 我宁愿不制作自己的幻灯片组件并尝试让它工作，因为这是使用这个库的重点。我尝试更改不同的 css 样式以查看它是否有效，尝试更改某些内容，但尚未修复。

注释 当我将组件放入故事书中时，问题就消失了。我不确定有什么区别，我将相同的道具传递给两者。

为每个添加描述的适当方法是什么？目前我正在添加一个 div，但我无法看到文本。