<div class="container">
    <div class="item">
        <!-- Первый блок "до/после" -->
        <div class="before-after-container">
            <div class="image-container">
                <img src="https://static.tildacdn.com/tild6162-3365-4339-a331-626234333031/Instagram_post_-_75.png" alt="После 1" class="image-after">
                <img src="https://static.tildacdn.com/tild3931-6535-4338-b436-373734633335/Instagram_post_-_74.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>