jquery - jquery featherlight – 图片下方的标题

Question

在几乎标准配置中使用lightslider我遇到了我只能在imageslider而不是下面显示标题的问题。我怎样才能实现这种行为？

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

亲切的问候，马蒂亚斯

Answer 1

我为此解决方案使用 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>