jquery featherlight – caption BELOW imageslider

Question

using lightslider in pretty much standard config I ran into the problem that I can only display captions INSIDE the imageslider and NOT below. How can I achieve such behaviour?

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

kind regards, matthias

I see no jQuery or JavaScript in your question which it is tagged as. Please revise to add a fully reproducible functional example including all markup , css and code needed for the smallest reproducible example. — Mark Schultheiss, Jun 24 '18 at 15:33

score 0 · Answer 1 · answered Jul 29 '19 at 04:17

I'm using HTML5 tags "figure" and "figcaption" for this solution.

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

jquery featherlight – caption BELOW imageslider

1 Answers1