infinite scroll in marque image

[hamza-elkaissi]

hi, I have a problem with my marque image Can anyone please help me make the section infinitely scrolling?

my store

password: hera

my section code

<style>
  .section-{{ section.id }}.custom-marquee-images {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100vw;
    max-width: 100%;
    height: {{ section.settings.marquee_height_desktop }}px;
    overflow: hidden;
    background: {{ section.settings.colorBackground }};
    position: relative;
    box-sizing: border-box;
    padding: 0;
    border-radius: {% if section.settings.border_radius == 'rounded' %} 30px {% else %} 0 {% endif %};
  }

  .section-{{ section.id }}.custom-marquee-images .track-images {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee {{ section.settings.scroll_speed }}s linear infinite;
  }

  {% if section.settings.pause_on_hover %}
  .section-{{ section.id }}.custom-marquee-images:hover .track-images {
    animation-play-state: paused;
  }
  {% endif %}

  .section-{{ section.id }}.custom-marquee-images img {
    margin-left: 20px;
    width: {{ section.settings.image_width_desktop }}px;
    height: auto;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    {% if section.settings.enable_grayscale %}
    filter: grayscale(100%);
    {% else %}
    filter: none;
    {% endif %}
  }

  .section-{{ section.id }}.custom-marquee-images img:hover {
    transform: scale(1.1);
    {% if section.settings.enable_grayscale %}
    filter: grayscale(0%) brightness(1.2);
    {% else %}
    filter: brightness(1.2);
    {% endif %}
  }

  /* Keyframes for infinite scrolling */
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  /* Mobile-specific styles */
  @media (max-width: 768px) {
    .section-{{ section.id }}.custom-marquee-images {
      height: {{ section.settings.marquee_height_mobile }}px;
    }

    .section-{{ section.id }}.custom-marquee-images .track-images {
      width: max-content; /* Ensure content width */
    }

    .section-{{ section.id }}.custom-marquee-images img {
      margin-left: 10px;
      width: {{ section.settings.image_width_mobile }}px;
    }
  }
</style>

<div class="section-{{ section.id }} custom-marquee-images" role="region">
  <div class="track-images">
    {%- for block in section.blocks -%}
      <div class="image-wrapper">
        <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="auto">
      </div>
    {%- endfor -%}

    <!-- Duplicate content for seamless scroll -->
    {%- for block in section.blocks -%}
      <div class="image-wrapper">
        <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="auto">
      </div>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "Marquee Images",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#06ffbc"
    },
    {
      "type": "range",
      "id": "marquee_height_desktop",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Marquee Height (Desktop)"
    },
    {
      "type": "range",
      "id": "marquee_height_mobile",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 80,
      "label": "Marquee Height (Mobile)"
    },
    {
      "type": "range",
      "id": "image_width_desktop",
      "min": 10,
      "max": 300,
      "step": 5,
      "default": 100,
      "label": "Image Size (Desktop)"
    },
    {
      "type": "range",
      "id": "image_width_mobile",
      "min": 10,
      "max": 300,
      "step": 5,
      "default": 80,
      "label": "Image Size (Mobile)"
    },
    {
      "type": "range",
      "id": "scroll_speed",
      "min": 5,
      "max": 60,
      "step": 1,
      "default": 13,
      "label": "Scrolling Speed (seconds)"
    },
    {
      "type": "checkbox",
      "id": "enable_grayscale",
      "label": "Enable Grayscale to Color Effect",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover",
      "default": true
    },
    {
      "type": "select",
      "id": "border_radius",
      "label": "Border Radius",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "rounded",
          "label": "Rounded"
        }
      ],
      "default": "none"
    }
  ],
  "blocks": [
    {
      "type": "image_picker",
      "name": "Logo",
      "limit": 20,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Images"
    }
  ]
}
{% endschema %}

[hamza-elkaissi]

thank you for responding 

my store: hera-theme.myshopify.com

password: hera