个人中心
gpt4 book ai didi

javascript - Bulma 旋转木马没有响应

转载 作者：行者123 更新时间：2023-11-30 06:19:23 27 4
gpt4 key购买 nike

我正在尝试将 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) 的类中的方法
文章推荐： java - 如何使用 Unicode 或 Java 中的任何替代方法显示 "sigma-hat"？ (我有一个部分解决方案)
文章推荐： javascript - 下拉列表在 jquery 数据表移动 View 中不起作用
文章推荐： javascript - 有没有办法为 foreach 的每次迭代设置状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com