Image comparison slider
JavaScript based slider component that can be used to demonstrate the difference between two images.
Around component
The image comparison slider functionality depends on a third-party plugin. Ensure that you include links to the plugin's CSS and JavaScript files in your document, like so:
- assets/vendor/img-comparison-slider/dist/styles.css for the styles
- assets/vendor/img-comparison-slider/dist/index.js for the JavaScript
For additional guidance, you can refer to this page as an example.
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>