Карусель с использованием Bulma CSS Framework

Я новичок в Bulma Framework. Я начал со следующего в моем файле HTML. Я не устанавливал никаких пакетов.

<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 css и js? Также возможно ли отображать пунктирную навигацию, как карусель Owl в карусели Bulma?

Magecode 26.07.2018 источник

comment

пожалуйста, обратитесь к документации Bulma - charan kumar 26.07.2018

comment

Уже проверил, но бот понимает. это сбивает с толку. - Magecode 26.07.2018

Ответы (2)

arrow_upward
1
arrow_downward

Чтобы интегрировать Bulma-Carousel в свой проект, выполните следующие действия:
Ссылка на CSS файла Bulma и CSS и JS файлы Bulma-Carousel.
Затем инициализируйте Bulma- Карусель в отдельном .js файле.

Вот стартовый проект, который поможет вам начать работу:

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-carousel.min.css" />
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>

скрипты.js

bulmaCarousel.attach('#slider', {
  slidesToScroll: 1,
  slidesToShow: 3,
  infinite: true,
});

aldi 26.07.2018

comment

Я не уверен, что jQuary действительно нужен. У меня без него нормально работает. - Nagasaki45; 02.09.2018

comment

@aldi, можете ли вы изменить размер данных в зависимости от экрана в расширении bulma carousal? ‹div class=carousel carousel-animated carousel-animate-slide data-size=3› ‹/div - B L Λ C K; 27.09.2018

comment

@Ryder Да, вы можете использовать атрибут data-size. - aldi; 27.09.2018

comment

@aldi спасибо за ответ. Да, я знаю, что могу использовать размер данных, мой реальный вопрос был, можем ли мы динамически изменять размер данных в зависимости от размера экрана? например, размер данных для рабочего стола = 4 и размер данных для полного разрешения = 6. Я знаю, что могу использовать javascript для этого, но есть ли что-нибудь встроенное в Bulma? Извините за путаницу. - B L Λ C K; 28.09.2018

comment

@Ryder Это невозможно через HTML, поэтому лучше всего реализовать этот тип функции через JavaScript. - aldi; 28.09.2018

comment

@aldi У меня такая работа на странице примера, но ползунок появляется с шириной, равной всем встроенным фотографиям. Есть ли способ ограничить только мою обычную ширину страницы? - a coder; 16.07.2020

arrow_upward
0
arrow_downward

Вы можете посмотреть на реализацию карусели с Bulma здесь:

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

Он построен на Bulma Framework, поэтому легко интегрируется с ним.

Вам понадобится эта базовая структура

<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>

Вам также нужно будет импортировать его, как только вы загрузите пакет.

<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-carousel/dist/bulma-carousel.min.js"></script>

И инициализируйте его этой строкой в вашем файле JavaScript

var carousels = bulmaCarousel.attach();

IvanS95 28.08.2018

comment

Я добавил все это, но моя карусель все еще не работает, не могли бы вы порадовать меня этим, у меня тоже есть вопрос: stackoverflow.com/questions/54091200/ - Farrukh Faizy; 10.01.2019

Карусель с использованием Bulma CSS Framework

Ответы (2)

Вопросы по теме