Position page indicator dots above figcaption, or bottom edge if figcaption is not present

Question

I'm using this Wordpress plugin (WP Slider) to allow me to create carousel/sliders as Gutenberg blocks — specifically image gallery sliders. To facilitate this, I have a WP Swiper block and inside that I have an image block within each slide tab. In general it's working great, but there's some tweaks I'm looking to make to the layout.

I want to place the page indicator dots just above the bottom edge of the image. Below that, I want to display the image caption text. I've already got this working, but I also want to support the case where an image doesn't have a caption. At the moment, when the figcaption isn't present, the page indicator dots have too much margin to the bottom edge of the image (because I'm setting the margin to the bottom of the WP Swiper element), which is only correct value when the caption is there.

How can I modify my CSS to accommodate both of these cases?

Here's what I tried.

HTML:

<div class="is-style-default wp-swiper wp-swiper--0">
    <div class="wp-swiper__wrapper" style="color:#000000">
        <div class="swiper-container swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" ...>
            <div class="swiper-wrapper" id="swiper-wrapper-55c175c8651654910" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
                <div class="wp-swiper__slide swiper-slide swiper-slide-active" data-tab="slide-1" style="width: 693px;" role="group" aria-label="1 / 4">
                    <div class="wp-swiper__overlay-color" style="background-color:rgba(247, 248, 249, 1)"></div>
                    <div class="wp-swiper__slide-content" style="max-width:100%">
                        <figure class="wp-block-image size-large is-style-default">
                            <img decoding="async" loading="lazy" width="1024" height="768" src="..." alt="" class="wp-image-2311" srcset="..." sizes="(max-width: 1024px) 100vw, 1024px">
                            <figcaption class="wp-element-caption">Test</figcaption>
                        </figure>
                    </div>
                </div>
                <div class="wp-swiper__slide swiper-slide swiper-slide-next" data-tab="slide-2" style="width: 693px;" role="group" aria-label="2 / 4">
                    <div class="wp-swiper__overlay-color" style="background-color:rgba(247, 248, 249, 1)"></div>
                    <div class="wp-swiper__slide-content" style="max-width:100%">
                        <figure class="wp-block-image size-large">
                            <img decoding="async" loading="lazy" width="1024" height="768" src="..." alt="" class="wp-image-2263" srcset="..." sizes="(max-width: 1024px) 100vw, 1024px">
                        </figure>
                    </div>
                </div>



                <div class="wp-swiper__slide swiper-slide" data-tab="slide-3" style="width: 693px;" role="group" aria-label="3 / 4">
                    <div class="wp-swiper__overlay-color" style="background-color:rgba(247, 248, 249, 1)"></div>
                    <div class="wp-swiper__slide-content" style="max-width:100%">
                        <figure class="wp-block-image size-large">
                            <img decoding="async" loading="lazy" width="1024" height="768" src="..." sizes="(max-width: 1024px) 100vw, 1024px">
                        </figure>
                    </div>
                </div>



                <div class="wp-swiper__slide swiper-slide" data-tab="slide-4" style="width: 693px;" role="group" aria-label="4 / 4">
                    <div class="wp-swiper__overlay-color" style="background-color:rgba(247, 248, 249, 1)"></div>
                    <div class="wp-swiper__slide-content" style="max-width:100%">
                        <figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="768" src="..." sizes="(max-width: 1024px) 100vw, 1024px"></figure>
                    </div>
                </div>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
        <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-55c175c8651654910" aria-disabled="true"></div><div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-55c175c8651654910" aria-disabled="false"></div><div class="swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active" aria-current="true"></span>
            <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
        </div>
    </div>
</div>

CSS:

.swiper-pagination-bullets {
    margin-bottom: 40px;
}

.swiper-pagination-bullets span {
    background: white;
}

.swiper-pagination-bullet {
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-button-prev, .swiper-button-next {
    color: #FFFFFFCC;
    background-image: none;
}

.wp-swiper, .location-map, .gallery-slider, .gb-block-image, .wp-block-gallery {
    margin-bottom: 1.5em;
}

.gb-block-image img {
    max-height: 436px;
}

.wp-swiper__slide-content .wp-block-image .wp-element-caption {
    margin-top: 13px;
    padding-bottom: 12px;
    padding-top: 12px;
}

Example:

Answer 1

Caption will affect height of .wp-swiper__slide.swiper-slide element. If there is a caption, it will be positionned under the image and the global slide height is higher than a slide without caption.

I guess there is missing CSS in your post. Probably CSS applied by the wordpress plugin. So, I'm guessing that prev button, next button and bullets have position:absolute; relative to .wp-swiper__wrapper item. And with a bottom property.

You can override it by seting bottom:auto; to bullets and prev/next buttons, and then add top property instead. It will position your bullets and buttons depending on your slide top position and not the bottom position. So the caption won't affect your bullets and buttons

As said before, I'm guessing what css is applied by the plugin. Make sure to verify if plugin css properties won't affect yours. Try something like this :

.swiper-pagination-bullets {
    margin-bottom: 0;
    bottom:auto;
    top:396px; // 436px - 40px calculated from your img max-height and previous margin-bottom spacing
}

Careful, it won't work if your image height is under 436px. If the image height is not know, you can't get exactly what you want with this html structure, or you will probably need to put captions in position absolute. You won't need previous code on .swiper-pagination-bullets, instead, you should have something like this :

.wp-swiper__slide-content .wp-block-image{
    position:relative;
}
.wp-swiper__slide-content .wp-block-image .wp-element-caption {
    position:absolute;
    top:calc(100% + 13px);
    padding-bottom: 12px;
    padding-top: 12px;
}

And again, it won't be perfect because caption can over overlap elements that are after your slider depending on caption height