Fatal编程技术网

Javascript 显示球转盘

javascript

Javascript 显示球转盘,javascript,bulma,Javascript,Bulma,我是布尔马的新手。我正在尝试旋转木马的扩展，但它不工作。我复制了一个示例，并遵循文档进行了研究，但仍然不起作用。谢谢你的帮助！这是我的密码： <script type="text/javascript" src="https://wikiki.github.io/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js"></script> <script> $(d

我是布尔马的新手。我正在尝试旋转木马的扩展，但它不工作。我复制了一个示例，并遵循文档进行了研究，但仍然不起作用。谢谢你的帮助！这是我的密码：

<script type="text/javascript" src="https://wikiki.github.io/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js"></script>
<script>
      $(document).ready(function(){
         bulmaCarousel.attach();
      });
</script>


$（文档）.ready（函数（）{
bulmaCarousel.attach（）；
});
首先，您不能直接从Github包含脚本。 试着用一个新的

要将Bulma Carousel集成到您的项目中，请执行以下步骤：
链接Bulma的文件和Bulma旋转木马的文件。
然后，在一个单独的
.js
文件中初始化Bulma转盘

以下是一个帮助您入门的入门项目：

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css" />
    <script defer src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
    <script defer src="scripts.js"></script>
  </head>
  <body>
    <section class="section">
      <div class="container is-clipped">
        <div id="slider">
          <div class="card">
            <div class="card-image">
              <figure class="image is-16by9 is-covered">
                <img
                  src="https://images.unsplash.com/photo-1550921082-c282cdc432d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
                  alt=""
                />
              </figure>
            </div>
            <div class="card-content">
              <div class="item__title">
                Mon titre 1
              </div>
              <div class="item__description">
                Ici une petite description pour tester le slider
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-image">
              <figure class="image is-16by9 is-covered">
                <img
                  src="https://images.unsplash.com/photo-1550945771-515f118cef86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
                  alt=""
                />
              </figure>
            </div>
            <div class="card-content">
              <div class="item__title">
                Mon titre 2
              </div>
              <div class="item__description">
                Ici une petite description pour tester le slider
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-image">
              <figure class="image is-16by9 is-covered">
                <img
                  src="https://images.unsplash.com/photo-1550971264-3f7e4a7bb349?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
                  alt=""
                />
              </figure>
            </div>
            <div class="card-content">
              <div class="item__title">
                Mon titre 3
              </div>
              <div class="item__description">
                Ici une petite description pour tester le slider
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-image">
              <figure class="image is-16by9 is-covered">
                <img
                  src="https://images.unsplash.com/photo-1550931937-2dfd45a40da0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
                  alt=""
                />
              </figure>
            </div>
            <div class="card-content">
              <div class="item__title">
                Mon titre 4
              </div>
              <div class="item__description">
                Ici une petite description pour tester le slider
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-image">
              <figure class="image is-16by9 is-covered">
                <img
                  src="https://images.unsplash.com/photo-1550930516-af8b8cc4f871?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
                  alt=""
                />
              </figure>
            </div>
            <div class="card-content">
              <div class="item__title">
                Mon titre 5
              </div>
              <div class="item__description">
                Ici une petite description pour tester le slider
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-image">
              <figure class="image video-container is-16by9">
                <iframe type="text/html" src="https://www.youtube.com/embed/H0v773vKS_U" frameborder="0"></iframe>
              </figure>
            </div>
            <div class="card-content">
              <div class="item__title">
                Mon titre 6
              </div>
              <div class="item__description">
                Ici une petite description pour tester le slider
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
你说的“不起作用”是什么意思？控制台中是否有任何错误消息？否控制台中不显示任何错误。我从期望的元素中得到了脚本src。图像以块的形式显示，没有像示例中那样的效果仍然不起作用，可能是因为我在使用cdn？。谢谢你的帮助。你在用这个吗？另外，您集成了jQuery吗？我刚刚尝试了cdn，但仍然是一样的。是的，我已经在head标记中导入了jquery 
bulmaCarousel.attach('#slider', {
  slidesToScroll: 1,
  slidesToShow: 3,
  infinite: true,
});