Как отобразить заголовок на карусели Bulma? - PullRequest
Новая
       53

Как отобразить заголовок на карусели Bulma?

0 голосов
/ 14 октября 2019

Я на самом деле изучаю Bulma и пытаюсь преодолеть эту проблему с Bulma-carousel:

Карусель работает хорошо, но я хочу добавить заголовок на каждое отображаемое изображение.

Я пробовал многотакие вещи, как поместить изображение в качестве фона элемента карусели, но изображение не соответствует полной высоте карусели и т. д. *

Вот мой фактический код: 

<section class="hero is-large has-carousel">
    <div class="hero-head"></div>
    <div class="hero-body">
        <div class="hero-carousel" data-autoplay="true" data-navigation-keys="false" data-autoplay-speed="5000" data-effect="fade" data-duration="1000">
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background" src="{{ 'assets/images/slider_1.jpg'|theme }}">
                <h2 class="title">C'est beau le Mourillon!</h2>
            </div>
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background"src="{{ 'assets/images/slider_2.jpg'|theme }}">
                <h2 class="title">Oh le téléphérique :o</h2>
            </div>
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background"src="{{ 'assets/images/slider_3.jpg'|theme }}">
                <h2 class="title">Devinez qui je suis?</h2>
            </div>
        </div>
    </div>
    <div class="hero-foot"></div>
</section>

Проблемазаголовок отображается после изображения, поэтому он находится вне элемента section и не отображается!

Я не могу сделать его центрированным внутри изображения!

1 Ответ

0 голосов
/ 14 октября 2019

Я наконец нашел решение (через 3 часа) в проблемах с плагином git : 

<div class="carousel-item has-background"> // has-background
    <img class="is-background" src="images/slider_1.jpg"> // is-background
    <div class="hero-body has-text-centered is-overlay"> //hero-body is-overlay
        <h2 class="title">C'est beau le mourillon!</h2>
        <h3 class="subtile">Surtout le 15 août...</h3>
    </div>
</div>
...