<div class="about__slider">
                <div class="item">
                    <img src="https://via.placeholder.com/1220x450">
                </div>
                <div class="item">
                    <img src="https://via.placeholder.com/1220x450">
                </div>
                <div class="item">
                    <img src="https://via.placeholder.com/1220x450">
                </div>
            <div class="slider__control">
                <a class="control__item control__item-arrow" onclick="minusSlide()">Prev</a>
                
                    <div class="slide__count">
                        <div class="control__item control__item-num active">01</div>
                            <hr class="horizontal">                           
                        <div class="control__item control__item-num total">03</div> 
                    </div>

                <a class="control__item control__item-arrow" onclick="plusSlide()">Next</a>
            </div>
        </div>
hr.horizontal {
    width: 25px;
    height: 0.1px;
    color: #000;
    
    margin: auto 3px auto 2px;
}

.about__slider {
    display: flex;
    flex-direction: column;
    
    margin-top: 50px;
}

.item img {
    width: 100%;
}

.slider__control {
    display: flex;
    justify-content: space-between;
}

.control__item {
    display: inline-block;
    vertical-align: middle;
    
    text-align: center;
    text-decoration: none;
    
    border: none;
    background-color: transparent;
    
    padding: 8px 0;
    overflow: hidden;
}


.control__item-arrow {
    width: 98px;
    font-size: 18px;
    font-weight: 200;
    color: #6A6B6D !important;
    
    cursor: pointer;
}


.slide__count {
    width: 70px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.control__item-num {
    font-weight: 200;
    font-size: 18px;
    color: #6A6B6D;
    
}

.control__item-num:first-child {
    margin: 0;
}




/* Slider animation */
.about__slider .item {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
/* Индекс слайда по умолчанию */
var slideIndex = 1;
showSlides(slideIndex);

/* Функция увеличивает индекс на 1, показывает следующй слайд*/
function plusSlide() {
    showSlides(slideIndex += 1);
}

/* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/
function minusSlide() {
    showSlides(slideIndex -= 1);  
}

/* Устанавливает текущий слайд */
function currentSlide(n) {
    showSlides(slideIndex = n);
}

/* Основная функция слайдера */
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("item");
    var dots = document.getElementsByClassName("slider__item-num");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace("active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.