var slides = document.querySelectorAll(".image-list .slide-image");
var previousImageButton = document.getElementById("prev-image");
var nextImageButton = document.getElementById("next-image");
var currentSlide = 0;
var counter = document.getElementById("slide-count");
var secondaryProgressBar = document.getElementsByClassName("secondary-progress-bar")[0];
var progressBarWidth = 100; // qui ho determinato la larghezza totale della barra grigia

function imageCounter() {
    counter.textContent = (currentSlide + 1) + " / " + (slides.length);
}

function setSecondaryProgressBarWidth() {
    secondaryProgressBar.style.width = (progressBarWidth / slides.length) + "%"; /* così imposto la larghezza della barra nera che dovrà scorrere sulla grigia */
}

function nextSlide() {
    goToSlide(currentSlide + 1);
    increase(); // cliccando sulla freccetta destra, parte questa funzione
}

function previousSlide() {
    goToSlide(currentSlide - 1);
}

function goToSlide(n) {
    slides[currentSlide].className = "slide-image";
    currentSlide = (n + slides.length) % slides.length;
    slides[currentSlide].className = "slide-image showing";
    imageCounter();
}

function increase() {
    var i = secondaryProgressBar.style.width;
    secondaryProgressBar.style.left = i;
} /* questa è la prima funzione che ho scritto, ovviamente non va bene, assegna la larghezza della barra nera alla posizione "left" sul css. */

document.addEventListener("onload", imageCounter(), setSecondaryProgressBarWidth() );
nextImageButton.addEventListener("click", nextSlide);
previousImageButton.addEventListener("click", previousSlide);

/* io credo che la funzione debba tener conto di quante sono le slide (slides.length), della lunghezza assegnata alla barra nera (secondaryProgressBar.style.width) e modificare dinamicamente il valore della posizione della barra nera (secondaryProgressBar.style.left), sommando, ad ogni avanzamento di posizione, il valore della sua stessa width finché non raggiunge 100 (il valore totale della lunghezza della barra grigia) e ripartire da capo una volta arrivato a 100.
Per avere, ad esempio:
al primo click - secondaryProgressBar.style.left = 25%
al secondo - secondaryProgressBar.style.left = 50%
ecc  */