javascript - 布尔玛旋转木马没有响应
问题描述
我正在尝试将 bulma carousel 合并到我的 react 应用程序中,但它似乎不起作用。我也尝试使用Bulma Carousel这个文档来实现它,但它似乎仍然不起作用。
这是我的代码,请随时指出在哪里做正确的事情来工作。
索引.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>
这是我的轮播组件:
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;
我还在我的节点模块中安装了 Bulma 扩展,使用npm i bulma-extensions
注意:我是 React 和 Bulma 的新手
解决方案
所以我终于找到了一种有趣的方法来让它运行。
轮播似乎不适用于 npm version 中包含的 js npm i bulma-extensions
。
每当我尝试从轮播扩展上提到的方法之一的模块中添加 js 文件时,它似乎不起作用
但是,当我使用 CDN 中的这个标签时,它工作正常
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@3.0.0/dist/js/bulma-carousel.min.js"></script>
推荐阅读
- excel - 在 VBA 中使用 WITH 刷新 Excel 2016 数据透视表失败?
- java - java.lang.NullPointerException:ImageView.setImageDrawable(android.graphics.drawable.Drawable)
- python - 为什么 scipy.optimize.curve_fit 没有产生最适合我的点的线?
- algorithm - 最早期限内动态零星服务器的优先级优先
- telethon - 为什么我自己的频道会显示“telethon.errors.rpcerrorlist.ChannelPrivateError”?
- reactjs - 如何使用 react-pdf 在 pdf 中呈现 recharts 图
- bazel - 如何获取 bazel 缓存项或失败
- javascript - 更新嵌套状态的替代方案或解决方案
- flask - 重定向到不同页面时,Flask Login 对所有属性返回 False
- python - 通过wifi从RFID阅读器接收数据 - python