1st slider of announcement banner is not visible

[Shivam_Learning]

So, I tried all javascript changes still no success, Only the 2nd and 3rd slider of announcement bar is visible and sliding back and forth and 1st announcement text slider is not visible.

https://q9ahtvfkhd5g0me2-88161681693.shopifypreview.com

/**
 * Returns a function that, as long as it continues to be invoked, won't be triggered.
 * @param {Function} fn - Callback function.
 * @param {number} [wait=300] - Delay (in milliseconds).
 * @returns {Function}
 */
function debounce(fn, wait = 300) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), wait);
  };
}

if (!customElements.get('announcement-bar')) {
  class AnnouncementBar extends HTMLElement {
    constructor() {
      super();
      this.slider = this.querySelector('.announcement__slider');
      this.localization = this.querySelector('.announcement__localization');
      this.links = this.querySelectorAll('.js-announcement-link');
      this.menu = document.querySelector('.main-menu__content');
      this.isPaused = false;

      this.bindEvents();
      this.init();
    }

    disconnectedCallback() {
      if (this.moveLinksHandler) {
        window.removeEventListener('on:breakpoint-change', this.moveLinksHandler);
      }

      if (this.moveLocalizationHandler) {
        window.removeEventListener('on:breakpoint-change', this.moveLocalizationHandler);
      }
    }

    bindEvents() {
      if (this.links) {
        this.moveLinksHandler = this.moveLinksHandler || this.moveLinks.bind(this);
        window.addEventListener('on:breakpoint-change', this.moveLinksHandler);
      }

      if (this.localization) {
        this.moveLocalizationHandler = this.moveLocalizationHandler
          || debounce(this.moveLocalization.bind(this));
        window.addEventListener('on:breakpoint-change', this.moveLocalizationHandler);
      }

      if (this.slider) {
        this.slider.addEventListener('mouseenter', this.pauseSlider.bind(this));
        this.slider.addEventListener('mouseleave', this.resumeSlider.bind(this));
      }
    }

    init() {
      if (this.slider) {
        const slides = this.slider.querySelectorAll('.announcement__text');
        let currentIndex = 0;

        // Ensure initial visibility of the first slide
        slides.forEach(slide => slide.classList.remove('is-visible'));
        slides[0].classList.add('is-visible');

        // Reset the scroll position to start at the first slide
        this.slider.scrollTo({
          left: slides[0].offsetLeft,
          behavior: 'auto'
        });

        const nextSlide = () => {
          if (!this.isPaused && theme.elementUtil.isInViewport(this)) {
            slides.forEach(slide => slide.classList.remove('is-visible')); // Reset visibility

            // Update the index and loop back if necessary
            currentIndex = (currentIndex + 1) % slides.length;

            // Scroll to the next slide
            this.slider.scrollTo({
              left: slides[currentIndex].offsetLeft,
              behavior: 'smooth'
            });

            // Mark the next slide as visible
            slides[currentIndex].classList.add('is-visible');
          }

          // Set delay for the next slide transition
          setTimeout(nextSlide, this.dataset.slideDelay);
        };

        setTimeout(nextSlide, this.dataset.slideDelay); // Start the rotation
      }

      if (this.links) {
        this.moveLinks();
      }

      if (this.localization) {
        this.moveLocalization();
      }
    }

    moveLinks() {
      const menuAnnouncementLinks = document.querySelector('.mob__announcement-links');
      if (!theme.mediaMatches.md && !menuAnnouncementLinks) {
        const mobNav = document.createElement('nav');
        mobNav.classList.add('mob__announcement-links');

        const mobNavUl = document.createElement('ul');
        mobNav.classList.add('secondary-nav');

        this.links.forEach((link) => {
          mobNav.innerHTML += `<li><a class="secondary-nav__item" href="${link.href}">${link.innerText}</a>`;
        });

        mobNav.appendChild(mobNavUl);
        this.menu.appendChild(mobNav);
      } else if (theme.mediaMatches.md && menuAnnouncementLinks) {
        menuAnnouncementLinks.remove();
      }
    }

    moveLocalization() {
      this.slider = this.querySelector('.announcement__slider');
      this.localization = this.querySelector('.announcement__localization');
      this.links = this.querySelectorAll('.js-announcement-link');
      this.menu = document.querySelector('.main-menu__content');
      const menuLocalization = document.querySelector('.mob__localization');
      if (!theme.mediaMatches.md && !menuLocalization) {
        const mobLocalizationElem = document.createElement('div');
        mobLocalizationElem.classList.add('mob__localization');
        mobLocalizationElem.appendChild(this.localization.firstElementChild);
        this.menu.appendChild(mobLocalizationElem);
      } else if (theme.mediaMatches.md && menuLocalization) {
        this.localization.appendChild(menuLocalization.firstElementChild);
        menuLocalization.remove();
      }
    }

    pauseSlider() {
      this.isPaused = true;
    }

    resumeSlider() {
      this.isPaused = false;
    }
  }

  customElements.define('announcement-bar', AnnouncementBar);
}

[Shivam_Learning]

It might be the visibility issue related to css