# Fullscreen slideshow with fading background

For the past months I have been learning plain javascript without jquery or libraries/frameworks. So now, when I develop a website, I want to write all of the JS code by myself to fully understand what is going on and to learn the language.

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

For example: how do you stop the slideshow when it is out of view. Otherwise your content below the slideshow might jump up and down because the slides have different heights.

I have realized that I didn't now what I was doing, and that I don't know how to "design" such functionalites. I get "something somehow" to work.

What I am asking for is advice on structuring code for a slideshow like this. Any advice would be gratefully received. Here is a link to the current version of the page. http://jugelt-kk.de/2019/#eins

And some example code:

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

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

setHeightOfTopicsContainer(getHeightOfActiveTopic(currentActive) + "px")

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

topics.forEach( (topic, i) => {
if(topic.dataset.number == nextIndex){
// Add active class to icon
setHeightOfTopicsContainer(getHeightOfActiveTopic(topic) + "px")

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

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

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

setBackgroundImage(nextIndex)

nextIndex++;

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

}, 3000)

icons.forEach( icon => {