Слайдер на чистом JS нужен совет как оптимизировать

let buttons = document.querySelectorAll('.slider-button button'),
    blocks = document.querySelectorAll('.list-slider li'),
    slideButton = document.querySelector('.slider-button');

buttons.forEach((button, index) => {
    button.addEventListener('click', function(event){
        let click = index;
        if(event.target.closest('.arrow-button')){
            let active = document.querySelector('.slider-button .slide-button.active'),
                countBlock = 0;
            if(active.closest('li').nextElementSibling.className == 'arrow-slide'){
                clearSlideButton(blocks, buttons);
                blocks[countBlock].classList.add('active');
                buttons[countBlock].classList.add('active');
            }else{
                let li = document.querySelector('.list-slider .slide.active')
                                .nextElementSibling;
                let liButt = active.closest('li')
                                    .nextElementSibling
                                    .firstChild
                                    .nextSibling;
                clearSlideButton(blocks, buttons);
                li.classList.add('active');
                console.log(liButt);
                liButt.classList.add('active');
            }
            return;
        }
        clearSlideButton(blocks, buttons);
        blocks[index].classList.add('active');
        buttons[index].classList.add('active');
    });
})

function clearSlideButton(blocks, buttons, countblock = 0){
    blocks.forEach((block, index) => {
        blocks[index].classList.remove('active');
        blocks[index].classList.remove('content-view');
        buttons[index].classList.remove('active');
    });
}

/**/
    @keyframes leftSlide{
        0% { transform: translateX(-10000px); }
        70% { transform: translateX(30px); }
        90% { transform: translateX(-10px); }
        100% { transform: translateX(0); }
    }

    @keyframes rightSlide{
        0% { transform: translateX(10000px); }
        70% { transform: translateX(-30px); }
        90% { transform: translateX(10px); }
        100% { transform: translateX(0); }
    }

    .wrap-slide{
        display: none;
    }

    .wrap-slide.content-view{
        animation-name: leftSlide;
        animation-duration: 1s;
        display: block;
    }

    .img-view{
        display: none;
    }

    .slide .img-view{
        display: block;
        animation-name: rightSlide;
        animation-duration: 1s;
    }

    .slider-button.anim{
        animation-name: rightSlide;
        animation-duration: 1s;
    }
/**/

.slider{
    background-color: rgba(230, 244, 255, 0.5);
}

.wrap-slider{
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}

.list-slider{
    max-width: 1440px;
    margin: 0 auto;
}

.slide{
    display: none;
    margin-left: 75px;
}

.slide.active{
    display: flex;
}

.title-slide{
    margin-top: 60px;
    font-family: 'Nunito', 'Century Gohtic', 'Arial';
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 49px;
    color: #27497D;
    margin-bottom: 20px;
}

.content-slide{
    max-width: 530px;
    line-height: 22px;
    font-style: normal;
    margin-right: 130px;
    font-weight: normal;
}

.detailed-slide{
    font-family: 'Nunito', 'Century Gohtic', 'Arial';
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(255, 109, 109, 0.35);
    border-radius: 30px;
    background-color: #FF6D6D;
    padding: 8px 45px 8px 50px;
    margin-top: 40px;
    display: block;
    max-width: 200px;
    box-sizing: border-box;
}

.slider-button{
    position: absolute;
    top: -16px;
    background-color: rgba(0, 0, 0, 0.36);
    left: 735px;
    width: 80px;
    height: 429px;
    padding-top: 170px;
    box-sizing: border-box;
}

.slide-button{
    width: 15px;
    height: 15px;
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
}

.arrow-button{
    width: 15px;
    height: 15px;
    background-image: '<->';
    background-color: rgba(255, 255, 255, 0);
    background-size: 100%;
    cursor: pointer;
    border: none;
}

.arrow-slide{
    margin-top: 123px;
    margin-bottom: 0;
}

.slider-button li{
    text-align: center;
    margin-bottom: 17px;
}

.slide-button.active{
    background-color: rgba(255, 255, 255, 1);
}

ul{
    list-style: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <section class="slider">
            <div class="wrap-slider">
                <ul class="list-slider">
                    <li class="slide active">
                        <div class="wrap-slide content-view">
                            <h2 class="title-slide">О клинике 1</h2>
                            <p class="content-slide">1Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
                            <a href="#" class="detailed-slide">Подробнее</a>
                        </div>
                        <img src="https://via.placeholder.com/705x429" alt="dji" width="705" height="429" class="img-view">
                    </li>
                    <li class="slide">
                        <div class="wrap-slide content-view">
                            <h2 class="title-slide">О клинике 2</h2>
                            <p class="content-slide">2Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
                            <a href="#" class="detailed-slide">Подробнее</a>
                        </div>
                        <img src="https://via.placeholder.com/705x429" alt="dji" width="705" height="429" class="img-view">
                    </li>
                    <li class="slide">
                        <div class="wrap-slide content-view">
                            <h2 class="title-slide">О клинике 3</h2>
                            <p class="content-slide">3Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
                            <a href="#" class="detailed-slide">Подробнее</a>
                        </div>
                        <img src="https://via.placeholder.com/705x429" alt="dji" width="705" height="429" class="img-view">
                    </li>
                </ul>
                <ul class="slider-button">
                    <li>
                        <button type="button" class="slide-button active"><span class="visually-hidden">slide 1</span></button>
                    </li>
                    <li>
                        <button type="button" class="slide-button"><span class="visually-hidden">slide 2</span></button>
                    </li>
                    <li>
                        <button type="button" class="slide-button"><span class="visually-hidden">slide 3</span></button>
                    </li>
                    <li class="arrow-slide">
                        <button type="button" class="arrow-button"><span class="visually-hidden">next</span></button>
                    </li>
                </ul>
            </div>
        </section>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>