javascript - Bulma 旋转木马没有响应-6ren

javascript - Bulma 旋转木马没有响应

转载作者：行者123 更新时间：2023-11-30 06:19:23

27

4

我正在尝试将 bulma carousel 合并到我的 React 应用程序中，但它似乎无法正常工作。我尝试使用 Bulma Carousel 实现它这个文档也是如此，但它似乎仍然不起作用。

这是我的代码，请随意指出在哪里做正确的事情。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <link rel="stylesheet" href="./css/style.css" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>Simple React App</title>
</head>

<body>

  <div id="root"></div>
  <script type="text/javascript" src="/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.min.js"></script>
  <script>
    window.onload = function () {
      var carousels = bulmaCarousel.attach();
      console.log(carousels);
    }
  </script>
</body>

</html>

这是我的 Carousel 组件:

import * as React from "react";
import { render } from "react-dom";

const Carousel = () => {
  return (
    <div>
      <div className="carousel carousel-animated carousel-animate-slide">
        <div className="carousel-container">
          <div className="carousel-item has-background is-active">
            <img
              className="is-background"
              src="https://wikiki.github.io/images/merry-christmas.jpg"
              alt=""
              width="640"
              height="310"
            />
            <div className="title">Merry Christmas</div>
          </div>
          <div className="carousel-item has-background">
            <img
              className="is-background"
              src="https://wikiki.github.io/images/singer.jpg"
              alt=""
              width="640"
              height="310"
            />
            <div className="title">
              Original Gift: Offer a song with{" "}
              <a href="https://lasongbox.com" target="_blank">
                La Song Box
              </a>
            </div>
          </div>
          <div className="carousel-item has-background">
            <img
              className="is-background"
              src="https://wikiki.github.io/images/sushi.jpg"
              alt=""
              width="640"
              height="310"
            />
            <div className="title">Sushi time</div>
          </div>
          <div className="carousel-item has-background">
            <img
              className="is-background"
              src="https://wikiki.github.io/images/life.jpg"
              alt=""
              width="640"
              height="310"
            />
            <div className="title">Life</div>
          </div>
        </div>
        <div className="carousel-navigation is-overlay">
          <div className="carousel-nav-left">
            <i className="fa fa-chevron-left" aria-hidden="true" />
          </div>
          <div className="carousel-nav-right">
            <i className="fa fa-chevron-right" aria-hidden="true" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Carousel;

我还使用 npm i bulma-extensions 在我的节点模块中安装了 Bulma 扩展

注意:我是 React 和 Bulma 的新手

最佳答案

所以我终于找到了一种让它运行的有趣方法。

似乎轮播似乎不适用于 npm 版本 npm i bulma-extensions 中包含的 js。

当我试图从 carousel extension 上提到的方法之一的模块中添加 js 文件时而且它似乎不起作用

但是，当我从 CDN 使用这个标签时，它工作正常

<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@3.0.0/dist/js/bulma-carousel.min.js"></script>

关于javascript - Bulma 旋转木马没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54091200/

27

4

0

文章推荐： java - 如何模拟来自 jar (JAVA) 的类中的方法

文章推荐： javascript - 下拉列表在 jquery 数据表移动 View 中不起作用

文章推荐： javascript - 有没有办法为 foreach 的每次迭代设置状态

bulma - Bulma 中框元素的大小和居中
我有一个登录模式，其中有一个框，具有以下 CSS 结构: // content // content
bulma - Bulma 中框元素的大小和居中
我有一个登录模式，其中有一个框，具有以下 CSS 结构: // content // content
bulma - 如何在 Bulma 中制作横向卡片？
我正在尝试在 bulma 中制作一张带有左侧图像的水平卡片。我希望卡片具有圆角边缘并具有与普通 bulma 卡片相同的响应属性。Bulma 目前不支持水平卡片，但我偶然发现了这个 github 问题，
bulma - 如何在 Bulma 中为进度条使用自定义颜色？
我有 3 个 Bulma 进度条，我想将每个进度条的值颜色更改为不同。 15% 15% 15% 更改 SCSS 变量 $progress-value-background-color使所有进度条值都具
bulma - 从 Bulma SASS 中删除未使用的颜色
我开始学习 Bulma 框架。我有一个问题 - 从 SASS 中删除未使用的颜色以减小最终 CSS 大小的正确方法是什么？默认情况下，Bulma 为大多数元素生成每种颜色的集合，在 sass/util
bulma - 使用 Bulma CSS 在表单中并排放置两个输入的最佳方法是什么？
我刚刚开始使用 Bulma 来设计我的网站，并且很难确定该框架是否支持并排放置两个表单字段。最好的例子是用户的名字和姓氏。 Bulma's form group看起来很有希望，但如果您想要两个单独的字
bulma - 如何在 Bulma 中制作可点击的图像，像
html - 带有 Bulma CSS 的 Angular 6 呈现没有 Bulma 样式的 HTML 元素
我刚刚安装了 Angular 6，启动了一个新的应用程序，并添加了 Bulma作为 CSS 框架。为确保一切正常运行，我对我的 app.component.html 模板进行了一些快速更改并运行了
html - 有什么方法可以编辑 "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"文件吗？
我尝试通过在同一文件夹中创建一个 css 文件 style.css 来做到这一点，复制提供的 bulma 链接的源代码，然后将其链接到我的 html 文档。但是，它根本没有显示任何 css 功能。最
Bulma:面板内的字段宽度较短
当我在面板内添加字段控件时，它的输入宽度较短。我尝试了很多但无法使输入全宽。下面是我的代码示例和结果图像。 School Data
Bulma Navbar断点
我正在为项目使用Bulma框架，并且移动菜单的最大宽度为1024px。我想仅在屏幕宽度为769px或以下时激活移动菜单。我已经花了几个小时来浏览sass文件，却找不到如何覆盖默认行为。最佳答案此
bulma 将图像缩放到容器
我遵循文档示例并将其放在 media 中目的: 我将其用作 card 的一部分用于显示多个元素。问题是当上传的图像不是平方(意味着比例不是 1:1)时，图像会溢出容器，从而有效地破坏了布局
css - Bulma - 在平板电脑上显示未折叠的导航栏
在下面的可运行代码片段中，我设置了一个带有导航栏的基本 Bulma 布局。对于我拥有的链接的数量/大小，导航栏很早就打破了汉堡包。如何仅在较小的屏幕上实现此中断？例如汉堡包只在手机上。 (funct
css - Bulma - 下拉列表位于模态卡体后面
我意识到嵌入模态卡体中的 Bulma 下拉菜单会被模态体覆盖，因此这会导致 UX 问题，如果下拉菜单高于卡体本身，用户必须向下滚动或移动鼠标光标向下移动滚动条，对此合适的 CSS 修复是什么？即让下拉
css - Bulma:将模态向右对齐
关闭。这个问题需要debugging details .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 17 天前关闭。 Improve this quest
css - bulma - 有效地调整排版大小
我很难找出调整移动文本大小的最有效方法。我知道每个 documentation ，使文本大小响应屏幕相当简单，只需添加 is-size-*-mobile class 到元素以将文本大小重置为值 * (
html - Bulma - 如何使文本和图像内联或彼此相邻？
我正在为我的元素使用 Bulma。基本上，我正在尝试使用 Bulma 将 text 和 image(height: 25em) 内联。但它没有发生。到目前为止，我尝试过这个: .img-cont
bulma - bool 玛的中心图像
有没有办法将卡片内的图像水平居中？我有以下我无法将图像居中。我试图添加 is-centered无论是图形还是父 div
javascript - Bulma 旋转木马没有响应
我正在尝试将 bulma carousel 合并到我的 React 应用程序中，但它似乎无法正常工作。我尝试使用 Bulma Carousel 实现它这个文档也是如此，但它似乎仍然不起作用。这是我的
html - Bulma - 如何将图像和文本内联
我想要右边的文字和左边的图像，反之亦然，两者都垂直居中。应该如下所示图片最佳答案结构

首页

博学

6Ren·AI

商城

javascript - Bulma 旋转木马没有响应