Integrate a slider

[cs-mshah]

Can we integrate a slider as well, since several projects involve comparing with a previous method. One such project which integrates sliders like juxtapose (https://github.com/NUKnightLab/juxtapose) is BrushNet (https://tencentarc.github.io/BrushNet/). I tried to do the following as per the basic example, but there seems to some conflict with the CSS of juxtapose and clarity:

<div class="container blog main gray">
        <div class="slide-menu">
            <ul class="dots" id="slide-menu">
                <li class="dot active"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
            </ul>
        </div>

        <div class="slide-content", style="display: block;">
            <video loop muted autoplay src="https://nvlabs-fi-cdn.nvidia.com/_web/stylegan3/videos/video_2_metfaces_interpolations.mp4" style="width: 100%"> </video>
        </div>

        <div class="slide-content", style="display: none;">
            <video loop muted autoplay src="https://nvlabs-fi-cdn.nvidia.com/_web/stylegan3/videos/video_3_afhq_interpolations.mp4" style="width: 100%"> </video>
        </div>

        <div class="slide-content", style="display: none;">
            <video loop muted autoplay src="https://nvlabs-fi-cdn.nvidia.com/_web/stylegan3/videos/video_4_beaches_interpolations.mp4" style="width: 100%"> </video>
        </div>

        <div class="slide-content" , style="display: none;">
            <div class="juxtapose">
                <img src="https://sites.research.google/parti/paper_images_green_watermark_outputs/figures/cherries/tornado/tiger_cubism.jpg"
                    data-label="2009" data-credit="Alex Duner/Northwestern Knight Lab" />
                <img src="https://sites.research.google/parti/paper_images_green_watermark_outputs/figures/cherries/cherry2/panda_tennis.jpg"
                    data-label="2010" data-credit="Alex Duner/Northwestern Knight Lab" />
            </div>
            <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
            <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
        </div>

        <p class="caption">
            The videos show interpolations between hand-picked latent points in several datasets. Observe again how the textural detail appears fixed in the StyleGAN-2 result, but transforms smoothly with the rest of the scene in the alias-free StyleGAN-3.
        </p>
    </div>

Is there any way to integrate a slider easily within clarity containers?

[cs-mshah]

It would also be great to have a multi sliders to show multiple layers on top of a single image. Something like depth maps, segmentation maps and normal maps beside the main RGB image.

[lorenmt]

I will take a look.

[cs-mshah]

I think I messed up some css. Moreover juxtapose seems to be quite old. I just used https://img-comparison-slider.sneas.io/:

Add this to the header:

<script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
    <style>
        .slider-container {
            text-align: center;
        }

        .centered-slider {
            display: inline-block;
        }

        .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: 50%;
            transform: translateY(-50%);
            line-height: 100%;
        }

        .before figcaption {
            left: 12px;
        }

        .after figcaption {
            right: 12px;
        }

    </style>

Add this anywhere in the code:

<div class="slider-container">
    <img-comparison-slider class="centered-slider slider-with-animated-handle">
        <figure slot="first" class="before">
            <img src="assets/figures/mug.webp" />
            <figcaption>Mug</figcaption>
        </figure>
        <figure slot="second" class="after">
            <img src="assets/figures/mug2.webp" />
            <figcaption>Mug 2</figcaption>
        </figure>
    </img-comparison-slider>
</div>

This also works inside the slide-content class and is well centred now. But it would be great to have a native solution.

[lorenmt]

Hi @cs-mshah, really appreciate your provided solution above. I have slightly tuned the design based on your code and have now added it to the main template: https://github.com/lorenmt/clarity-template/commit/46ec3eee19ea86775982e3c93c5b35716bad2d09.