javascript: slideshow with full screen with attenuated background

During the last months I have been learning javascript without jQuery or libraries / frameworks. So now, when I develop a website, I want to write all the JS code on my own to fully understand what is happening and learn the language.

So far so good. I tried to implement a slide show with a background image that was fading. I had to learn, that although it sounds really simple and straightforward, there are many things you should keep in mind.

For example: how to stop the slide show when it is out of view. Otherwise, your content below the slide show could jump up and down because the slides have different heights.

I realized that now I did not know what I was doing, and that I do not know how to "design" such features. I get "something in some way" to work.

What I'm asking is advice on how to structure the code for a slide show like this. Any advice would be received with gratitude. Here is a link to the current version of the page. http://jugelt-kk.de/2019/#eins

And some example code:

function temasSlider () {
numberTopics ();
dotOnClick ();
iconOnClick ();
}


showNextTopic () {function {
// Get index of current active topic
leave currentActive = document.querySelector (". topic.is-active");
leave currentIndex = parseInt (currentActive.dataset.number);
Let's go to nextIndex = currentIndex + 1;

setHeightOfTopicsContainer (getHeightOfActiveTopic (currentActive) + "px")

leave refreshInterval = setInterval (function () {
currentActive.classList.remove ("is-active");

topics.forEach ((topic, i) => {
if (topic.dataset.number == nextIndex) {
// Add active class to the icon
topic.classList.add ("is-active");
setHeightOfTopicsContainer (getHeightOfActiveTopic (theme) + "px")

} else {
// Remove the active class from the icon
topic.classList.remove ("is-active");
}
});

dots.forEach ((dot, i) => {
if (dot.dataset.number == nextIndex) {
// Add active class to the icon
dot.classList.add ("is-active");
} else {
// Remove the active class from the icon
dot.classList.remove ("is-active");
}
});

icons.forEach ((icon, i) => {
if (icon.dataset.number == nextIndex) {
// Add active class to the icon
icon.classList.add ("is-active");
} else {
// Remove the active class from the icon
icon.classList.remove ("is-active");
}
});

setBackgroundImage (nextIndex)

nextIndex ++;

if (nextIndex> getTopicsCount ()) {
nextIndex = 1;
}

}, 3000)

icons.forEach (icon => {
icon.addEventListener ("click", () => {
clearInterval (refreshInterval)
});
});

}