Image comparison slider
JavaScript based slider component that can be used to demonstrate the difference between two images.
The image comparison slider functionality depends on a img-comparison-slider plugin. Ensure that you include links to the plugin's CSS and JavaScript files in your document.
CSS file is linked in the <head> section and above theme.min.css reference in your document:
<link rel="stylesheet" href="assets/vendor/img-comparison-slider/dist/styles.css">JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/img-comparison-slider/dist/index.js"></script>Horizontal
<!-- Horizontal (default) image comparison slider -->
<img-comparison-slider class="focus-none text-white rounded-4" style="--divider-width: .125rem; --divider-color: currentColor">
<figure slot="first">
<img src="assets/img/docs/image-comparison-slider/before.jpg" alt="Image before">
<figcaption class="badge position-absolute top-50 start-0 translate-middle-y fs-sm bg-white text-dark rounded px-3 py-2 ms-3 ms-sm-4">Before</figcaption>
</figure>
<figure slot="second">
<img src="assets/img/docs/image-comparison-slider/after.jpg" alt="Image after">
<figcaption class="badge position-absolute top-50 end-0 translate-middle-y fs-sm bg-white text-dark rounded px-3 py-2 me-3 me-sm-4">After</figcaption>
</figure>
<div slot="handle" style="width: 42px">
<svg class="text-white border border-dark 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"></circle>
</g>
<path fill="#222934" d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z"></path>
</svg>
</div>
</img-comparison-slider>Vertical
<!-- Vertical image comparison slider -->
<img-comparison-slider direction="vertical" class="focus-none text-white rounded-4" style="--divider-width: .125rem; --divider-color: currentColor">
<figure slot="first">
<img src="assets/img/docs/image-comparison-slider/before.jpg" alt="Image before">
<figcaption class="badge position-absolute top-0 start-50 translate-middle-x fs-sm bg-white text-dark rounded px-3 py-2 mt-3 mt-sm-4">Before</figcaption>
</figure>
<figure slot="second">
<img src="assets/img/docs/image-comparison-slider/after.jpg" alt="Image after">
<figcaption class="badge position-absolute bottom-0 start-50 translate-middle-x fs-sm bg-white text-dark rounded px-3 py-2 mb-3 mb-sm-4">After</figcaption>
</figure>
<div slot="handle" style="width: 42px">
<svg class="text-white border border-dark 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"></circle>
</g>
<path fill="#222934" d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z"></path>
</svg>
</div>
</img-comparison-slider>