Próbowałeś np. w taki sposób?
[ on-line ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 2rem;
}
.img-comp-container {
position: relative;
height: 230px;
}
.button-container {
position: absolute;
bottom: 0;
display: flex;
gap: .5rem;
}
.button-container button {
all: unset;
width: 1.4rem;
aspect-ratio: 1;
text-align: center;
border-radius: 50%;
border: 1px solid hsl(197 51% 52% /.8);
cursor: pointer;
transition: all 250ms;
}
@media (any-hover: hover) {
.button-container button:hover {
border: 1px solid hsl(197 41% 42%);
background-color: hsl(197 51% 52%);
}
}
.button-container button:focus:not(:focus-visible) {
outline: 1px solid hsl(197 21% 22%);
}
button.selected {
background-color: hsl(206 90% 54% /.8);
}
.img-comp-img {
position: absolute;
width: auto;
height: 200px;
overflow: hidden;
}
.img-comp-img img {
display: block;
object-fit: cover;
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
width: 40px;
height: 40px;
background-color: hsl(206 90% 54%);
opacity: 0.8;
border-radius: 50%;
transition: opacity 200ms;
}
.img-comp-slider:active {
opacity: 0.2;
}
</style>
</head>
<body>
<h1>Compare Two Images</h1>
<p>Click and slide the blue slider to compare two images:</p>
<div class="img-comp-container">
<div class="img-comp-img">
<img src="https://picsum.photos/300/200?random=1" width="300" height="200">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="https://picsum.photos/300/200?random=2" width="300" height="200">
</div>
<div class="button-container">
<button data-img="https://picsum.photos/300/200?random=1" class="selected">1</button>
<button data-img="https://picsum.photos/300/200?random=3">2</button>
<button data-img="https://picsum.photos/300/200?random=4">3</button>
<button data-img="https://picsum.photos/300/200?random=5">4</button>
<button data-img="https://picsum.photos/300/200?random=6">5</button>
<button data-img="https://picsum.photos/300/200?random=7">6</button>
<button data-img="https://picsum.photos/300/200?random=8">7</button>
<button data-img="https://picsum.photos/300/200?random=9">8</button>
</div>
</div>
<script>
window.onload = () => {
const comparisons = document.querySelectorAll('.img-comp-img');
compareImages(comparisons);
const buttonContainer = document.querySelector('.button-container');
buttonContainer.addEventListener('click', loadImage);
};
function compareImages(comparisons) {
let clicked = 0;
const compBase = comparisons[0],
compOverlay = comparisons[1];
/* set the width of the img element to 50% */
compOverlay.style.width = (compBase.offsetWidth / 2) + "px";
/* create slider */
const slider = document.createElement('DIV');
slider.setAttribute('class', 'img-comp-slider');
compOverlay.parentElement.insertBefore(slider, compOverlay);
positionSliderMiddle(compOverlay, slider);
slider.addEventListener("mousedown", slideReady);
window.addEventListener("mouseup", slideFinish);
slider.addEventListener("touchstart", slideReady);
window.addEventListener("touchend", slideFinish);
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
function slideReady(e) {
e.preventDefault();
clicked = 1;
}
function slideFinish() {
clicked = 0;
}
function slideMove(e) {
if (clicked == 0) return false;
const position = getCursorPosition(e)
if (position < 0) position = 0;
if (position > compBase.offsetWidth) position = compBase.offsetWidth;
slide(position);
}
function getCursorPosition(e) {
e = (e.changedTouches) ? e.changedTouches[0] : e;
const bounding = compOverlay.getBoundingClientRect();
return (e.pageX - bounding.left) - window.pageXOffset;
}
function slide(position) {
compOverlay.style.width = position + "px";
positionSliderMiddle(compOverlay, slider);
}
function positionSliderMiddle(img, slider) {
slider.style.top = (img.offsetHeight / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
function loadImage(e) {
if (e.target.matches('button')) {
document.querySelector('button.selected').classList.remove('selected');
e.target.classList.add('selected');
const img = document.querySelector('.img-comp-img img');
img.src = e.target.dataset.img;
}
}
</script>
</body>
</html>
