I can't create the gallery in a loop shape

Question

`I did my best, but it didn't work. I want to create a continuously looping gallery. Can you help me? Thank you.

State Variables: The component uses React's useState hook to manage several state variables, including isDragging, startX, startY, scrollLeft, and scrollTop. These variables are used to track the state of image dragging and scrolling.

Event Handlers: The component defines several event handler functions, such as handleMouseDown, handleMouseLeave, handleMouseUp, and handleMouseMove. These functions handle mouse events like mouse down, mouse leave, mouse up, and mouse move. They are responsible for enabling dragging and scrolling behavior for the gallery.

Gallery Styles: The galleryStyle and imageStyle objects contain CSS styles that define the appearance of the photo gallery and its images. The gallery is set to a grid layout with five columns, and each image is styled with specific dimensions and positioning.

Render Images: The renderImages function generates an array of image elements. It iterates from 1 to 30 and creates image elements with the img tag. These images are sourced from a folder using a template string with process.env.PUBLIC_URL.

Component Rendering: Finally, within the return statement, the component renders a element with the CSS styles from galleryStyle. The onMouseDown, onMouseLeave, onMouseUp, and onMouseMove event handlers are attached to this div. Inside this div, the renderImages function is called to display the images.

import React, { useState } from "react";

const PhotoGallery = () => {
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  const [startY, setStartY] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);
  const [scrollTop, setScrollTop] = useState(0);

  const handleMouseDown = (e) => {
    setIsDragging(true);
    setStartX(e.pageX - e.currentTarget.offsetLeft);
    setStartY(e.pageY - e.currentTarget.offsetTop);
    setScrollLeft(e.currentTarget.scrollLeft);
    setScrollTop(e.currentTarget.scrollTop);
    e.currentTarget.style.cursor = "grabbing";
    e.currentTarget.style.scrollBehavior = "unset";
    e.currentTarget.style.userSelect = "none";
  };

  const handleMouseLeave = () => {
    setIsDragging(false);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;
    e.preventDefault();
    const x = e.pageX - e.currentTarget.offsetLeft;
    const y = e.pageY - e.currentTarget.offsetTop;
    const walkY = (y - startY) * 3;
    const walkX = (x - startX) * 3;
    e.currentTarget.scrollLeft = scrollLeft - walkX;
    e.currentTarget.scrollTop = scrollTop - walkY;

    if (e.currentTarget.scrollLeft === 0) {
      e.currentTarget.scrollTo(2200, 0);
    } else if (e.currentTarget.scrollLeft >= 2200) {
      e.currentTarget.scrollTo(0, 0);
    }
  };

  const galleryStyle = {
    display: "grid",
    gridTemplateColumns: "repeat(5, var(--size))",
    overflow: "hidden",
    position: "relative",
    backgroundColor: "aqua",
    position: "fixed",
    top: "0",
    left: "0",
    gridAutoRows: "var(--size)",
    width: "100%",
    height: "100%",
  };

  const imageStyle = {
    bottom: "0",
    height: "85vh",
    left: "0",
    margin: "0",
    padding: "0",
    pointerEvents: "none",
    position: "relative",
    right: "0",
    top: "0",
    width: "var(--size)",
    backgroundColor: "crimson",
  };

  const renderImages = () => {
    const images = [];
    for (let i = 1; i <= 30; i++) {
      images.push(
        <img
          key={i}
          src={`${process.env.PUBLIC_URL}/foto${i}.jpg`}
          alt={`Fotoğraf ${i}`}
          style={imageStyle}
        />
      );
    }
    return images;
  };

  return (
    <div
      className="gallery-container"
      style={galleryStyle}
      onMouseDown={handleMouseDown}
      onMouseLeave={handleMouseLeave}
      onMouseUp={handleMouseUp}
      onMouseMove={handleMouseMove}
    >
      {renderImages()}
    </div>
  );
};

export default PhotoGallery;