andreyiginov

.categories-with-images {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
    justify-content: center;
    flex-wrap: wrap;
}
.categories-with-images li {
    width: 126px;
    margin: 40px;
}

var click = false;
function Animation() {
    if (click == false) {
        document.getElementsByClassName('cd-handle')[0].style.left = '60%';
        document.getElementsByClassName('cd-handle')[0].style.transition = '2s';
        document.getElementsByClassName('cd-resize-img')[0].style.width = '60%';
        document.getElementsByClassName('cd-resize-img')[0].style.transition = '2s';
        function Obratno () {
            if (click == false) {
                document.getElementsByClassName('cd-handle')[0].style.left = '50%';
                document.getElementsByClassName('cd-resize-img')[0].style.width = '50%';
            }
        }
        setTimeout (Obratno,2000);
    }
}
if (click == false) {
    setInterval(Animation, 4000, click);
}
var tracker = document.getElementsByClassName('cd-handle')[0];
tracker.onmousedown = function() {
        mouse_x = window.event.clientX;
        fullwidth = document.documentElement.clientWidth;
        curr_mouse = mouse_x/fullwidth * 100;
        document.getElementsByClassName('cd-handle')[0].style.left = curr_mouse+"%";
        document.getElementsByClassName('cd-resize-img')[0].style.width = curr_mouse+"%";
        document.getElementsByClassName('cd-handle')[0].style.transition = 'none';
        document.getElementsByClassName('cd-resize-img')[0].style.transition = 'none';
        window.click = true;
    }