Image comparison slider
JavaScript based slider component that can be used to demonstrate the difference between two images.
Around component
Image comparison slider relies on 3rd party plugin. Make sure to link to plugin css and js files in your document: assets/vendor/img-comparison-slider/dist/styles.css and assets/vendor/img-comparison-slider/dist/index.js.
Use this page as a reference.
Example
<!-- Image comparison slider example -->
<div class="overflow-hidden rounded-4">
<img-comparison-slider class="m-n1">
<figure slot="first">
<img src="assets/img/landing/coworking-space/parallax-image.jpg" alt="Image before">
<figcaption class="badge position-absolute top-50 start-0 translate-middle-y bg-light rounded text-dark fs-sm fw-semibold lh-1 px-3 py-2 ms-3 ms-sm-4">
Before
</figcaption>
</figure>
<figure slot="second">
<img src="assets/img/landing/coworking-space/parallax-image-grayscale.jpg" alt="Image after">
<figcaption class="badge position-absolute top-50 end-0 translate-middle-y bg-light rounded text-dark fs-sm fw-semibold lh-1 px-3 py-2 me-3 me-sm-4">
After
</figcaption>
</figure>
<div slot="handle" style="width: 42px;">
<svg class="text-primary rounded-circle" width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
<g>
<circle fill="currentColor" cx="21" cy="21" r="21"/>
</g>
<path fill="white" d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z"/>
</svg>
</div>
</img-comparison-slider>
</div>// Image comparison slider example
.overflow-hidden.rounded-4
img-comparison-slider.m-n1
figure(slot="first")
img(src="assets/img/landing/coworking-space/parallax-image.jpg", alt="Image before")
figcaption.badge.position-absolute.top-50.start-0.translate-middle-y.bg-light.rounded.text-dark.fs-sm.fw-semibold.lh-1.px-3.py-2.ms-3.ms-sm-4
| Before
figure(slot="second")
img(src="assets/img/landing/coworking-space/parallax-image-grayscale.jpg", alt="Image after")
figcaption.badge.position-absolute.top-50.end-0.translate-middle-y.bg-light.rounded.text-dark.fs-sm.fw-semibold.lh-1.px-3.py-2.me-3.me-sm-4
| After
div(slot="handle", style="width: 42px;")
svg(width="42", height="42", viewBox="0 0 42 42", xmlns="http://www.w3.org/2000/svg").text-primary.rounded-circle
g: circle(fill="currentColor", cx="21", cy="21", r="21")
path(fill="white" d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z")