Flowbite 轮播仅显示在页面上重新加载

Question

我正在使用 Tailwind CSS 开发一个 React 项目。对于轮播要求，我们使用 Flowbite。从他们的示例中添加示例轮播代码时，它不起作用。重新加载页面时，轮播会显示并按预期工作。如果您导航到新页面并返回轮播页面，则图像不会显示并且轮播无法工作。我们正在使用react router dom。知道什么可能导致这种行为。

Answer 1

我遇到了同样的问题（与 Vue3+Nuxt 一起使用）。 我通过将 initCarousels 调用放在 onMounted 挂钩中的 setTimeout 内来解决这个问题。希望这也能为您解决。

Answer 2

今天我在使用 Next.js 时遇到了同样的问题，我的错误是安装了 标准库，而不是 Next.js 指示的安装。立即更换后，问题解决。

以下是在 React 中安装的文档，以及如何创建 flowbite-react 组件：

• https://flowbite-react.com/carousel
• https://flowbite.com/docs/getting-started/react/

Answer 3

事件虽然

setTimeout

有效，但下面的解决方案更方便，它是在

created

循环中定义的。 假设：轮播图像通过ajax调用加载。

这个想法是在模型更新后立即调用

initCarousels

。

created() {
  useAsyncData(() => $api('/fetch-uri'))
    .then(r => {
      this.product = r.data
      useFlowbite(() => {
        initCarousels()
    })
  })
}