3
\$\begingroup\$

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
        topic.classList.add("is-active");
        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
        dot.classList.add("is-active");
      } 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
        icon.classList.add("is-active");
      } else{
        // Remove active class from icon
        icon.classList.remove("is-active");
      }
    });

    setBackgroundImage(nextIndex)

    nextIndex++;

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

  }, 3000)

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

}
\$\endgroup\$
  • \$\begingroup\$ Welcome to Code Review! Can you add all the code to be reviewed, more than just the sample code? Otherwise we would be guessing at what some of those functions do... and if you can include the HTML that would be good. Refer to this meta answer as well as the others below it... \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Mar 27 at 18:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.