.slider {
      overflow-x: hidden;
    }

.slider-track {
  display: flex;
  align-items: center;
}

.slide {
  margin-right: 64px;
  flex-shrink: 0
}

  const initSlider = () => {
    const DEFAULT_SPEED = 2;

    const slider = document.querySelector(".slider");
    if (!slider) return;

    const wrapper = document.querySelector(".slider-track");

    wrapper.innerHTML += wrapper.innerHTML;

    let speed = DEFAULT_SPEED;
    let position = 0;

    slider.addEventListener("mouseenter", () => {
      speed = DEFAULT_SPEED / 2;
    });

    slider.addEventListener("mouseleave", () => {
      speed = DEFAULT_SPEED;
    });

    function animate() {
      position -= speed;

      if (Math.abs(position) >= wrapper.scrollWidth / 2) {
        position = 0;
      }

      wrapper.style.transform = `translateX(${position}px)`;
      requestAnimationFrame(animate);
    }

    animate();
  }

  initSlider();

[EDITOR’s NOTE]: Use Markdown triple-backtick code blocks to post code here so it gets escaped properly. Or make a Pen: pen.new. I’m not sure the above code posted correctly.

Temani specifically says at the top: https://frontendmasters.com/blog/infinite-marquee-animation-using-modern-css/#:~:text=At%20the%20time%20of%20writing%2C%20only%20Chrome%2Dbased%20browsers

Your phone is probably an iPhone, and all browsers (booooooooo) on iPhone are Safari.

Temani specifically says at the top: https://frontendmasters.com/blog/infinite-marquee-animation-using-modern-css/#:~:text=At%20the%20time%20of%20writing%2C%20only%20Chrome%2Dbased%20browsers