SOURCE

var elArrowRight = document.querySelector('.arrow-right');
var elArrowLeft = document.querySelector('.arrow-left');
var elListCarouselItem = document.querySelectorAll('.carousel-item');

var elIndicatorList = document.querySelector('.indicator-list');
var elIndicatorItem = document.querySelectorAll('.indicator-item');

var currentIndex = 0;
var listLength = elListCarouselItem.length;

elArrowRight.onclick = function() {
    var targetIndex = currentIndex + 1;
    processIndex(targetIndex);
    handleCurrentIndexChange();
}

elArrowLeft.onclick = function() {
    var targetIndex = currentIndex - 1;
    processIndex(targetIndex);
    handleCurrentIndexChange();
}

elIndicatorList.onclick = function(event) {
    var target = event.target;
    if (!target.classList.contains('indicator-item')) {
        return;
    }
    var targetIndex = parseInt(target.dataset.index, 10);

    processIndex(targetIndex);
    handleCurrentIndexChange();
}

function processIndex(targetIndex) {
    if (targetIndex > listLength - 1) {
        currentIndex = 0;
    } else if (targetIndex < 0) {
        currentIndex = listLength - 1;
    } else {
        currentIndex = targetIndex;
    }
}

function handleCurrentIndexChange() {
    document.querySelector('.carousel-item_current').classList.remove('carousel-item_current');
    elListCarouselItem[currentIndex].classList.add('carousel-item_current');
    document.querySelector('.indicator-item_current').classList.remove('indicator-item_current');
    elIndicatorItem[currentIndex].classList.add('indicator-item_current');
}

<div class="carousel-wrapper">
    <div class="carousel-item carousel-item_current" style="background-color: red;">
        0
    </div>
    <div class="carousel-item" style="background-color: yellow;">
        1
    </div>
    <div class="carousel-item" style="background-color: green;">
        2
    </div>
    <div class="carousel-item" style="background-color: blue;">
        3
    </div>
    <div class="indicator-list">
        <span data-index="0" class="indicator-item indicator-item_current">
        </span>
        <span data-index="1" class="indicator-item">
        </span>
        <span data-index="2" class="indicator-item">
        </span>
        <span data-index="3" class="indicator-item">
        </span>
    </div>
    <span class="arrow arrow-left">
        <</span>
            <span class="arrow arrow-right">
                >
            </span>
</div>

.carousel-wrapper {
    position: relative;
    width: 300px;
    height: 150px;
}

.carousel-item {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-wrapper .carousel-item_current {
    display: block;
}

.indicator-list {
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 15px;
    z-index: 999;
    text-align: center;
    font-size: 0;
}

.indicator-item {
    background-color: rgb(87, 219, 26);
    width: 10px;
    height: 2.5px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
}

.indicator-item_current {
    background-color: royalblue;
}

.arrow {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    display: inline-block;
    font-size: 15px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.arrow-left {
    left: 15px;
}

.arrow-right {
    right: 15px;
}