问题标签 [react-multi-carousel]

我正在尝试为具有来自休息 api 的数据的卡片组件实现https://www.npmjs.com/package/react-multi-carousel 。到目前为止我的代码如下，但轮播似乎没有实现？任何想法为什么？

code.js

我在我的一个反应项目中使用 https://www.npmjs.com/package/react-multi-carousel并且我已经实现了它并且它工作正常。

我现在需要在轮播上实现文本（图例），就像https://codesandbox.io/s/lp602ljjj7一样，它使用另一个包，但我需要那个场景而不是那个包，因为我的需要不同（使用 nextjs所以多轮播支持ssr，因此使用它）。

我唯一需要知道如何使用react-multi-carousel.

我的代码示例：https ://codesandbox.io/s/react-multi-carousel-playground-bt3v7

我正在从该州获取数据。现在我想使用 react-multi-carousel 制作一个轮播滑块

我正在尝试为具有来自 API 的数据的新闻卡组件实现https://www.npmjs.com/package/react-multi-carousel 。到目前为止我的代码如下，但轮播似乎没有实现？

子组件

父组件

我有来自休息 api 的图像进入我的应用程序。然后将这些图像填​​充到react-multi-carousel中。我想做的是使这些图像可点击用于灯箱。我对 React 还很陌生。到目前为止，我的轮播滑块代码是：

滑块.js

继续：如何让我的 react-multi-carousel 为我的 ReactJS 应用程序使用灯箱功能

我的应用程序将 react-images 用于灯箱，将 react-carousel-images 用于轮播。我的 api 有一个标题和图像。我遇到的问题是页脚标题中的标题始终作为所选图像出现，并且在灯箱轮播中不会改变。我认为这与所选图像的索引有关？到目前为止，我的代码是：

问题示例： https ://codesandbox.io/s/react-multi-corousal-issue-72s9o?file=/src/Slider.js

滑块.js

如何获得此轮播的可点击自定义点。我无法在列表项中绑定单击事件来移动轮播。我需要onClick在li项目之间进行适当的实现以单击轮播中的上一个和下一个项目

这是链接代码框中的完整代码

我开始使用 Next js，但我不知道这是它的问题还是 React 本身的问题。

所以问题是“react-multi-carousel”在我的应用程序中不起作用。因此，如果我对其中的值进行硬编码，基本上它可以工作，但是当我使用我的自定义组件时，其中是 map 函数，它不能正确呈现它。它需要 3 个组件，因为它们合二为一。您可以在我下面发布的图片上进行验证。我试图在Compilations组件之外渲染组件SliderCarousel，它应该可以正常工作，但是当我Compilations作为孩子传递给时SliderCarousel，它不会捕获它并从react-multi-carousel库中给它自己的类

这是我下面的代码，我省略了一些导入和导出以将注意力集中在主要部分

我的Compilation组件如下所示：

我的Compilations组件如下所示：

SliderCarousel组件看起来像这样

这是我的pages/index.js文件

功能是：

我希望你能帮我解决这个问题，因为我不知道如何解决这个问题

长期以来，我一直在为看似简单的解决方案而苦苦挣扎。我是打字稿的新手，也是反应新手。

我正在尝试使用 react-muli-carousel NPM 包。

我能够让 customButtonGroup 在沙箱中成功工作： https ://codesandbox.io/s/fervent-rain-332mn?file=/src/App.js:834-913

但是当我尝试在我的 SPFX 解决方案中实现它时，我收到以下错误：

Type '{}' is missing the following properties from type '{ [x: string]: any; next: any; previous: any; goToSlide: any; }': next, previous, goToSlide

任何帮助将不胜感激。谢谢！

研究了好几天，react-carousel 上没有显示箭头，图片如下所示： Image Of No arrows

• 我正在使用 Next .js 这是我第一次在使用常规反应应用程序时没有遇到这个问题

  }

我正在构建一个带有反应多轮播的轮播。到目前为止，这个包裹真的很棒，为我做了很多繁重的工作。我想我只是一件小事。是否有正确的方法在“customTransition”属性上为不同的设备类型设置不同的值？任何帮助将不胜感激。