JQuery Перышко - надпись внизу imageslider - PullRequest
Новая
       6

JQuery Перышко - надпись внизу imageslider

0 голосов
/ 24 июня 2018

при использовании светового слайдера в довольно стандартной конфигурации я столкнулся с проблемой, заключающейся в том, что я могу отображать только заголовки внутри слайдера изображений, а НЕ ниже. Как я могу добиться такого поведения? 

<ul class="lightSlider">
    <li data-thumb="image.jpg">
        <img class="einzelabbildung" src="image.jpg" width="0" height="300" alt="alt-text" title="title-text">
        <span class="caption">
            Caption-Text
        </span>
    </li>
</ul>

С уважением, Матиас

1 Ответ

0 голосов
/ 29 июля 2019

Я использую теги HTML5 "figure" и "figcaption" для этого решения. 

<style>
    figure {
        position: relative;
        padding-bottom: 1.5rem;
        text-align: center;
        text-indent: 0;
    }
    figcaption {
        padding: 10px;
        line-height: 0.8rem;
        position: absolute;
        bottom: -0.6rem;
        right: 0;
        left:0;
        text-align: center;
        color: #fff;
        background-color: rgba(15, 45, 90, 0.65) !important;
    }
</style>

<ul class="lightSlider">
    <li data-thumb="image.jpg">
        <figure>
            <img class="einzelabbildung" src="image.jpg" width="0" height="300" alt="alt-text" title="title-text">
            <figcaption>
                Caption-Text
            </figcaption >
        <figure>
    </li>
</ul>
...