jqueryfeatherlight–；图像滑块下方的标题

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

标题文本

亲切问候,， matthias

我使用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>

身材{
位置：相对位置；
垫底：1.5rem；
文本对齐：居中；
文本缩进：0；
}
菲卡普顿{
填充：10px；
线高：0.8雷姆；
位置：绝对位置；
底部：-0.6雷姆；
右：0；
左：0；
文本对齐：居中；
颜色：#fff；
背景色：rgba（15,45,90,0.65）！重要；
}


标题文本

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