<div class="container">
    <div class="item">
        <!-- Первый блок "до/после" -->
        <div class="before-after-container">
            <div class="image-container">
                <img src="https://static.tildacdn.com/tild3362-3661-4364-a231-613639626231/Instagram_post_-_81.png" alt="После 1" class="image-after">
                <img src="https://static.tildacdn.com/tild3130-6363-4663-a338-346236633135/Instagram_post_-_80.png" alt="До 1" class="image-before">
                <div class="slider"></div>
            </div>
        </div>
    </div>

<-------------------сокращение кода------------------->

        function updateSlider(container, x) {
            const containerRect = container.getBoundingClientRect();
            let sliderPosition = x - containerRect.left;

            if (sliderPosition < 0) sliderPosition = 0;
            if (sliderPosition > containerRect.width) sliderPosition = containerRect.width;

            const clipPercentage = (sliderPosition / containerRect.width) * 100;
            beforeImage.style.clipPath = `inset(0 ${100 - clipPercentage}% 0 0)`;

            slider.style.left = `${sliderPosition}px`;
        }

        function setInitialState(container, percentage) {
            const containerRect = container.getBoundingClientRect();
            const sliderPosition = containerRect.width * (percentage / 100);

            beforeImage.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
            slider.style.left = `${sliderPosition}px`;
        }
    });
});
</script>