Image Comparison Slider

[DylanDevelops]

Checklist

• I have read and accepted the contributing guidelines.

Is your feature request related to a problem? Please describe

I would love the ability to have an image comparison slider feature to add to the website.

Describe the solution you'd like

Think something like this:

Bassically, it is the ability to put two images in and allow for a slider to compare the two images.

Describe alternatives you've considered

No response

Additional context

No response

[github-actions]

This conversation has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[guillermodotn]

I would like to give this a try, but I’m a bit hesitant, @cotes2020. Can you please give me the green light 😅 ?

[cotes2020]

@guillermodotn No problem, go for it!

[guillermodotn]

@cotes2020, do you see good the use of a JS package for the implementation?

For example: img-comparison-slider.

I have the feeling you prefer to keep the project as lean as possible on dependencies.

[SumeetKul]

Check out https://juxtapose.knightlab.com/#overview for an easy, external solution. It'll return a an iframe that you can embed within your html page. Works like a charm!

[Derjyn]

@SumeetKul - I think we should avoid iframes and this sort of external solution. External tools like this constantly end up disappearing, going stale and unmaintained. Not to mention navigating the landscape of security, and of course, performance.

The JS package presented by @guillermodotn is one of the nicest slider libraries I've seen, and would certainly cast my vote for something like this. Maybe not as a direct implementation into Chirpy, but perhaps as a plugin or optional something-or-other...