文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用Bulma CSS框架的旋转木马

问使用Bulma CSS框架的旋转木马
EN

Stack Overflow用户
提问于 2018-07-26 13:58:54
回答 2查看 15.7K关注 0票数 1

我是Bulma Framework的新手。我已经开始在我的HTML文件中执行以下操作。我还没有安装任何软件包。

​

代码语言：javascript
复制
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>

 <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
</section>

​

使用bulma的最好方法是什么？

另外，我必须使用Bulma carousel。如何添加bulma carousel css和js？还有可能在Bulma carousel中显示像Owl carousel那样的虚线导航吗？

html
carousel
bulma
css
EN

回答 2

Stack Overflow用户

发布于 2018-07-26 14:34:49

为了将Bulma-Carousel集成到您的项目中，请执行以下步骤：

链接Bulma的CSS文件和Bulma-Carousel的CSS和JS文件。

然后，在一个单独的.js文件中初始化Bulma-Carousel。

这是一个帮助你入门的入门项目：

index.html

代码语言：javascript
复制
<!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>

scripts.js

代码语言：javascript
复制
bulmaCarousel.attach('#slider', {
  slidesToScroll: 1,
  slidesToShow: 3,
  infinite: true,
});
票数 1
EN

Stack Overflow用户

发布于 2018-08-29 04:21:05

您可以在这里查看带有Bulma的Carousel的实现：

https://wikiki.github.io/components/carousel/

它建立在Bulma框架之上，因此很容易与之集成。

您将需要这个基本结构

代码语言：javascript
复制
<div class='carousel carousel-animated carousel-animate-slide'>
 <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
 </div>

一旦你下载了这个包，你也需要用这个导入它。

代码语言：javascript
复制
<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-carousel/dist/bulma-carousel.min.js"></script>

并使用JavaScript文件中的以下行对其进行初始化

代码语言：javascript
复制
var carousels = bulmaCarousel.attach();
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51531920

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档