Bulma Carousel没有回应 [英] Bulma Carousel not responding
问题描述
我正在尝试将bulma轮播合并到我的react应用程序中，但似乎无法正常工作.我尝试使用布尔玛轮播来实现此文档，但它似乎仍然没有工作.
I am trying to incorporate the bulma carousel to my react application but it seems that its not going to work. I have tried implementing it using Bulma Carousel this documentation as well but still it doesn't seems to work.
这是我的代码，请随时指出在哪里可以正确执行工作.
Here is my code, Feel free to point out where to do things correct to work it.
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>
这是我的轮播组件:
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
注意:我是React和Bulma的新手
推荐答案
所以我终于找到了一种有趣的方法来使其运行.
So i finally found an interesting way to make it run.
轮播似乎无法与npm版本 npm i bulma-extensions 中包含的js配合使用.
It seems that the carousel doesn't seems to work with the js included in the npm version npm i bulma-extensions.
每当我尝试从旋转木马扩展似乎不起作用
When ever i tried to add the js file from modules from one of mentioned method on carousel extension and it doesn't seems to work
但是，当我从CDN使用此标签时，效果很好
However, When i used this tag from CDN it works fine
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@3.0.0/dist/js/bulma-carousel.min.js"></script>
这篇关于Bulma Carousel没有回应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
