Bulma Carousel not responding

问题

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>

Here is my Carousel Component:

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;

I have also install the Bulma extension in my node modules using npm i bulma-extensions

Note : I am new to React and Bulma

回答1:

So i finally found an interesting way to make it run.

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

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>

来源：https://stackoverflow.com/questions/54091200/bulma-carousel-not-responding

标签

javascript

css

reactjs

bulma