Помогите доделать javascript slider

Как сделать круги под слайдером. Может через какое-то условие или цикл? Например: если нажимаешь на 5-й круг, была 5-я фотография.

JS:

var btnPrev, btnNext, images, counter, circle;
btnPrev = document.querySelector('#gallery .buttons #previous');
btnNext = document.querySelector('#gallery .buttons #next');
counter = 0;
images = document.querySelectorAll('#gallery .photos img');
circle = document.querySelectorAll('#gallery .buttons div');
btnPrev.onclick = function(){
    images[counter].className = '';
    circle[counter].className = '';
    counter--;
    if(counter < 0) {
        counter = images.length - 1;
    }
    images[counter].className = 'showed';
    circle[counter].className = 'showed-circle';
    console.log('prev');
}
btnNext.onclick = function(){
    images[counter].className = '';
    circle[counter].className = '';
    counter++;
    if(counter >= images.length) {
        counter = 0;
    }
    images[counter].className = 'showed';
    circle[counter].className = 'showed-circle';
    console.log('next');
}

jsfiddle