<!-- Контейнер слайдера до/после -->
<div class="sonneto-ba-containerslider">
<div class="sonneto-ba-sliderslider" id="sonneto-BAslider">

<!-- Левая часть (до) -->
<div class="sonneto-Ba-beforeslider">
<img src="https://static.tildacdn.com/tild3161-3539-4162-b065-373565653836/danielhansen330776.jpg" alt="">
<!-- ↑ Изменяем изображение "до" -->
</div>

<!-- Правая часть (после) -->
<div class="sonneto-Ba-after">
<img src="https://static.tildacdn.com/tild3666-3334-4239-a631-353537373362/isairamos128262.jpg" alt="">
<!-- ↑ Изменяем изображение "после" -->
</div>

<!-- Ползунок -->
<div class="sonneto-ba-changeslider">
<div class="slider-rectangle"></div>
<!-- ↑ Прямоугольник на ползунке (ширина, высота, цвет) -->
</div>

</div>
</div>

<style>
/* Контейнер слайдера */
.sonneto-ba-containerslider {
width: 100%; /* Ширина слайдера */
height: 100%; /* Высота слайдера */
margin: 0 auto;
position: relative;
overflow: hidden;
user-select: none;
}

/* Слайдер */
.sonneto-ba-sliderslider {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;

border-radius: 10px; /* Скругление углов слайдера */
}

/* Левая и правая части */
.sonneto-Ba-beforeslider,
.sonneto-Ba-after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.sonneto-Ba-beforeslider img,
.sonneto-Ba-after img {
width: 100%;
height: 100%;
object-fit: cover; /* сохраняем пропорции */
}

/* Начальная обрезка картинок */
.sonneto-Ba-beforeslider {
z-index: 2;
clip-path: inset(0 50% 0 0); /* начальная позиция ползунка */
}

.sonneto-Ba-after {
z-index: 1;
clip-path: inset(0 0 0 50%);
}

/* Ползунок */
.sonneto-ba-changeslider {
position: absolute;
left: 50%; /* начальная позиция ползунка */
top: 0;
z-index: 10;
width: 2px; /* толщина линии */
height: 100%;
background-color: #09090b; /* цвет линии */
cursor: col-resize;
}

/* Стрелки на ползунке */
.sonneto-ba-changeslider::before,
.sonneto-ba-changeslider::after {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 8px 6px; /* размер стрелок */
transform: translateY(-50%);
}

.sonneto-ba-changeslider::before {
left: -20px;
border-color: transparent #09090b transparent transparent; /* цвет стрелки */
}

.sonneto-ba-changeslider::after {
right: -20px;
border-color: transparent transparent transparent #09090b; /* цвет стрелки */
}

/* Прямоугольник на ползунке */
.sonneto-ba-changeslider .slider-rectangle {
position: absolute;
left: 50%;
top: 50%;
width: 8px; /* ширина */
height: 35px; /* высота */
background-color: #09090b; /* цвет */
transform: translate(-50%, -50%);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.sonneto-ba-containerslider');
const beforeSlider = container.querySelector('.sonneto-Ba-beforeslider');
const afterSlider = container.querySelector('.sonneto-Ba-after');
const slider = container.querySelector('.sonneto-ba-sliderslider');
const handle = container.querySelector('.sonneto-ba-changeslider');

let isActive = false;

// Обновляем размеры изображений при изменении окна
function updateImageSize() {
const width = container.offsetWidth;
const height = container.offsetHeight;
beforeSlider.querySelector('img').style.width = `${width}px`;
beforeSlider.querySelector('img').style.height = `${height}px`;
afterSlider.querySelector('img').style.width = `${width}px`;
afterSlider.querySelector('img').style.height = `${height}px`;
}

// Обновление клип-пути (разделение картинок)
function updateClipPath(x) {
const rect = slider.getBoundingClientRect();
let percentage = ((x - rect.left) / rect.width) * 100;
percentage = Math.max(0, Math.min(100, percentage));
beforeSlider.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
afterSlider.style.clipPath = `inset(0 0 0 ${percentage}%)`;
handle.style.left = `${percentage}%`;


}

// Перемещение ползунка
function moveSlider(e) {
if (!isActive) return;
const x = e.touches ? e.touches[0].clientX : e.clientX;
updateClipPath(x);
}

// Инициализация слайдера
function initSlider() {
updateImageSize();
window.addEventListener('resize', updateImageSize);

handle.addEventListener('mousedown', () => { isActive = true; });
document.addEventListener('mouseup', () => { isActive = false; });
document.addEventListener('mousemove', moveSlider);

handle.addEventListener('touchstart', () => { isActive = true; });
document.addEventListener('touchend', () => { isActive = false; });
document.addEventListener('touchmove', moveSlider);
}

initSlider();
});
</script>