Slider con texto

Este recurso permite crear un banner con texto que se desliza de forma infinita, ideal para mostrar promociones o mensajes destacados.

<style>
  #slider {
      overflow: hidden;
      background-color: #363636;
      color: #fff;
      font-size: 22px;
      padding: 10px;
  }

  #slider p {
      margin: 0;
      display: inline-block;
      white-space: nowrap;
  }
</style>

<section>
    <div id="slider">
        <p>slider infinito web</p>
    </div>
</section>

<script>
    function createInfiniteScroll(containerId, repetitions = 20) {
        const container = document.getElementById(containerId);
        const textElement = container.querySelector("p");
        const originalText = textElement.textContent;

        textElement.textContent = Array(repetitions).fill(originalText).join(" ");

        let scrollPosition = 0;

        function scroll() {
            scrollPosition -= 0.4; // AJUSTAR LA VELOCIDAD
            if (Math.abs(scrollPosition) >= textElement.offsetWidth / repetitions) {
                scrollPosition = 0;
            }
            textElement.style.transform = `translateX(${scrollPosition}px)`;
            requestAnimationFrame(scroll);
        }

        scroll();
    }

    createInfiniteScroll("slider", 20);
</script>