jquery featherlight – 图片下方的标题答案

【问题标题】：jquery featherlight – caption BELOW imagesliderjquery featherlight – 图片下方的标题
【发布时间】：2018-06-24 15:04:32
【问题描述】：

在几乎标准配置中使用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>

亲切的问候，马蒂亚斯

【问题讨论】：

我们可以看演示吗？
我在您的问题中没有看到 jQuery 或 JavaScript 被标记为。请修改以添加一个完全可重现的功能示例，包括最小可重现示例所需的所有标记、css 和代码。

标签： jquery lightgallery

【解决方案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>

【讨论】：