Web Design issue when changing or Minimizing Browser Tabs (Nuxt Js, Slider, JavaScript)

Question

I've designed a web page with an slider Previously I used JQuery for writing slider codes But I had this problem with JQ too, But I thought maybe it be a bug in JQ and if I use Vuejs Nuxt maybe it be solved

but now I wrote those codes with pure javascript in nuxt and still i've this problem

The problem is : When Active browser tab is the site that i designed everything works cool but when i change tabs & spend some seconds on other browser tabs or when i minimize browser and I do work with other desktop Software. after all this seconds (not much time) when i come back to that open tab of my designed site, i see that design get crashed...

I've no idea why this happens

The codes are Complicated and connected i just want to see anybody has any idea that how can i solve this issue ! ?

<script>
export default {
  mounted() {
    let slider = this.$refs.slider;
    document.onreadystatechange = () => {
      if (document.readyState === "complete") {
        let curImg = new Image();
        curImg.src = "_nuxt/static/imgs/slider2.png";
        curImg.onload = function () {
          let curImg2 = new Image();
          curImg2.src = "_nuxt/static/imgs/slider3.png";
          curImg2.onload = function () {
            let curImg3 = new Image();
            curImg3.src = "_nuxt/static/imgs/slider.png";
            curImg3.onload = function () {
              let curImg4 = new Image();
              curImg4.src = "_nuxt/static/imgs/slider4.png";
              curImg4.onload = function () {
                slider.innerHTML =
                  `<li class="active">
          <img src="imgs/slider2.png" alt="slider 1" />
          <p data-en="Virtual Exhibition Work Tour" data-fa="تور نمایشگاه مجازی کار">تور نمایشگاه مجازی کار</p>
        </li>
                  <li>
                    <img src="imgs/slider3.png" alt="slider 1" />
                    <p data-en="Virtual Exhibition Internet Tour" data-fa="تور نمایشگاه مجازی اینترنت">تور نمایشگاه مجازی اینترنت</p>
                  </li>
                  <li>
                    <img src="imgs/slider.png" alt="slider 1" />
                    <p data-en="Our Consultant Services" data-fa="خدمات مشاورین چهارسو">خدمات مشاورین چهارسو</p>
                  </li>
                  <li>
                    <img src="imgs/slider4.png" alt="slider 1" />
                    <p data-en="About us & Services" data-fa="درباره ما و خدمات">درباره ما و خدمات</p>
                  </li>
                `;

                let margin = -460;
                let step = 0;

                function sliderMove() {
                  document.querySelector('div.body > div#bg').classList.remove('change');
                  let all_lis = slider.querySelectorAll('li');
                  all_lis[all_lis.length - 1].classList.remove('hide');
                  let activeLi = slider.querySelector('li.active');
                  let src = activeLi.querySelector('img').getAttribute('src');
                  margin -= 10;
                  step += 1;
                  if (step === 6) {
                    margin = -460;
                    step = 0;
                  }

                  let dirLang = document.querySelector('div.body').getAttribute('lang');
                  if (dirLang === 'fa' || dirLang === 'ae') {
                    dirLang = 'left';
                  } else {
                    dirLang = 'right';
                  }
                  let styleSlider = window.getComputedStyle(slider);
                  let mainMargin = parseInt(styleSlider.getPropertyValue('margin-left'));
                  styleSlider = mainMargin + 280;
                  let animate = setInterval(function () {
                    slide();
                    changeClass();
                  }, 0.5);

                  function slide() {
                    if (mainMargin === styleSlider) {
                      clearInterval(animate);
                      slider.style.marginLeft = margin + 'px';
                      all_lis[all_lis.length - 1].after(all_lis[0]);
                      all_lis[0].classList.remove('active');
                    } else {
                      mainMargin++;
                      slider.style.marginLeft = mainMargin + 'px';
                    }
                  }

                  function changeClass() {
                    all_lis[0].classList.add('hide');
                    all_lis[1].classList.add('active');
                  }

                  document.querySelector('div.body > div#bg').classList.add('change');
                  let styleElem = document.head.appendChild(document.createElement("style"));
                  setTimeout(function () {
                    styleElem.innerHTML = `div.body > div#bg::before{background-image: url(` + src + `);}`;
                  }, 800);
                }
                setInterval(sliderMove, 5000);
              }
            }
          }
        }
      }
    }
  },
  head: {
    script: [
      {
        type: 'module',
        src: 'https://kit.fontawesome.com/52d0de33cc.js'
      }
    ]
  },
}
</script>