Остановить автовоспроизведение, когда слайдер не виден - PullRequest
Новая
       7

Остановить автовоспроизведение, когда слайдер не виден

0 голосов
/ 28 марта 2019

Остановить автозапуск, когда слайдер не виден

Недавно я сам начал писать весь код и не использовал jQuery, какую-либо библиотеку или фрагменты кода.Я хочу сделать это самостоятельно, чтобы выучить язык.К сожалению, я полностью застрял.

Я пытаюсь позволить слайдеру автоматически воспроизводиться, когда он виден, и останавливать это поведение, когда он не виден.

Поэтому я написал некоторый код, чтобы определить,если раздел находится в поле зрения и есть функция для отображения следующего слайда (темы), которая выглядит следующим образом: 

let windowWidth;
let windowHeight;
let scrollTop;

const panelTopics = document.getElementById("ihrStarkerPartner")

window.addEventListener("scroll", (e) => {

  scrollTop = window.scrollY;
  let panel = panelTopics;
  let panelStart = panel.offsetTop;
  let panelEnd = panel.offsetTop + panel.clientHeight;
  let isInView;

  if(scrollTop >= panelStart && scrollTop <= panelEnd ){
    console.log("true");
    isInView = true;
    return true;
  } else{
    isInView = false;
    showNextTopic(isInView);
    console.log("false");
    return false;
  }

});

function showNextTopic(isInView){

  if(isInView == true){
    // 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)
      });
    });
  }

}

Конечно, это не работает, потому что, как только раздел отображается, функцияshowNextTopic проходит по всем темам.К сожалению, я понятия не имею, как структурировать мой код для достижения того, чего я хочу.Буду очень признателен за любую помощь / совет.

...