Document

by rga4

HTML

<div class="slider">
    <div class="slider-track">
      <div class="slide">
        <div>SLIDE 1</div>
        <img src="https://images.cnscdn.com/6/a/3/6/6a369b2a29980598cc398a5b85d3b48f/175x100.webp" alt="">
      </div>
      <div class="slide">
        <img src="https://images.cnscdn.com/7/f/b/d/7fbde26b1895d735904a6eb3871a43a0/175x100.webp" alt="">
      </div>
      <div class="slide">
        <img src="https://images.cnscdn.com/6/7/1/0/6710aa65fe77eadfc8069f903975460d/175x100.webp" alt="">
      </div>
      <div class="slide">
        <img src="https://images.cnscdn.com/e/8/4/b/e84b8d91f18d2e8c66d6ad736a7cae45/175x100.webp" alt="">
      </div>
    </div>
  </div>

CSS

.slider {
      overflow-x: hidden;
    }

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

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

JavaScript

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();