"Before and After" slider

Wappler General
#1

Quick question, does Wappler have a way to create a Simple “before and after” slider?

The end goal is to create a 100vh 100vw with to overlayed images for the before and after effect. I have a code pen that I can use but just wondering if Wappler has a feature I do not know about?

Thanks

#2

Hi Ryan,

There is no built in ‘Wappler way’ to do that. It will require a third party library.

#3

Thanks @brad

I figured that. Ill follow up this post with a walkthrough on how I created it. It might be of interest to some of the people here.

5 Likes
#4

All right so, Here is a quick tutorial on how to easily implement a “before and after” div on your website! It actually was very easy using the following Git.

https://github.com/NUKnightLab/juxtapose

After than here are the steps that i used to create the effect;

on the main.ejs file I added the following;

<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>

after than I created a div with to img scr links, the before and after images

 <section>
    <div class="juxtapose">
        <img src="https://ryfmwfookklfrflpzpak.supabase.co/storage/v1/object/public/public/beforeAfter/LakePowell_2048x1536_before.jpeg" />
        <img src="https://ryfmwfookklfrflpzpak.supabase.co/storage/v1/object/public/public/beforeAfter/LakePowell_2048x1536px_after.jpeg" />
    </div>
</section>

refresh and save and that is all that is needed. You can customize the CSS as needed.

Need to add this link as well to the main.ejs file for CSS reference and manipulation.

<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">

another update will be posted shortly on converting to responsive layout design.

2 Likes
#5

This one looks promising.