Image comparison slider

[jdumas]

Hi,

I am trying to use this image comparison slider with mkdocs-material. While the default integration works well enough, I am having trouble running their example with labels.

The code is as follows:

<style>
  .before,
  .after {
    margin: 0;
  }
  .before figcaption,
  .after figcaption {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 12px;
    color: #2e3452;
    opacity: 0.8;
    padding: 12px;
    position: absolute;
    top: 100%;
    transform: translateY(-100%);
    line-height: 100%;
  }
  .before figcaption {
    left: 12px;
  }
  .after figcaption {
    right: 12px;
  }
</style>

<div><img-comparison-slider>
    <figure slot="first" class="before">
        <img src="green-leaves.webp"/>
        <figcaption>Before</figcaption>
    </figure>
    <figure slot="second" class="after">
        <img src="green-leaves-blurred.webp"/>
        <figcaption>After</figcaption>
    </figure>
</img-comparison-slider></div>

First off, without the surrounding <div> tag, Python-Markdown somehow messes up the layout and the comparison slider doesn't work. If I use a <img> directly inside the <img-comparison-slider>, rather than a <figure> block, I do not need the surrounding <div> tag.

But there is a problem that is specific to mkdocs-material: somehow the left/right images are not aligned anymore when I use labels/figcaption. See the following screenshots:

mkdocs (no theme)

mkdocs-material

Any help/suggestion as to how to make this work with mkdocs-material would be appreciated. Thanks!

[SPyofgame]

You can make a js-injection on admonitions for better customization

[jdumas]

Sorry I'm a js/html noob. Can you provide more details on your suggestion?

[kamilkrzyskow]

Add this to you custom CSS:

.md-typeset img-comparison-slider figure {
    margin: initial;
}

the material theme adds margin to figures. Admonitions work too.
I played a bit with it, and unfortunately couldn't figure out how to disable the border when the comparison slider is clicked on, I personally dislike it... anyways hope it's enough.