Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brianlesko/html-image-comparison-slider

Last synced: about 20 hours ago
JSON representation

Host: GitHub
URL: https://github.com/brianlesko/html-image-comparison-slider
Owner: BrianLesko
Created: 2024-07-30T17:21:47.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-08-23T01:38:04.000Z (3 months ago)
Last Synced: 2024-08-23T02:45:32.893Z (3 months ago)
Language: CSS
Size: 12.3 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

# Image comparison Slider

Check out my deployment of this code on my rental website [here](https://mystudentrental.co)

Before and after comparison of a real estate rehab. Rennovation done in 2023.

## Dependencies

I used a CDN for both the JS and CSS styles needed for this slider, thanks to [sneas](https://github.com/sneas/img-comparison-slider/tree/master?tab=readme-ov-file).

Example gif of the before after comparison slider from sneas

╭━━╮╭━━━┳━━┳━━━┳━╮╱╭╮ ╭╮╱╱╭━━━┳━━━┳╮╭━┳━━━╮
┃╭╮┃┃╭━╮┣┫┣┫╭━╮┃┃╰╮┃┃ ┃┃╱╱┃╭━━┫╭━╮┃┃┃╭┫╭━╮┃
┃╰╯╰┫╰━╯┃┃┃┃┃╱┃┃╭╮╰╯┃ ┃┃╱╱┃╰━━┫╰━━┫╰╯╯┃┃╱┃┃
┃╭━╮┃╭╮╭╯┃┃┃╰━╯┃┃╰╮┃┃ ┃┃╱╭┫╭━━┻━━╮┃╭╮┃┃┃╱┃┃
┃╰━╯┃┃┃╰┳┫┣┫╭━╮┃┃╱┃┃┃ ┃╰━╯┃╰━━┫╰━╯┃┃┃╰┫╰━╯┃
╰━━━┻╯╰━┻━━┻╯╱╰┻╯╱╰━╯ ╰━━━┻━━━┻━━━┻╯╰━┻━━━╯

follow all of these for a cookie :)