Trying to create an "infinite logo scroller/carousell" section for Dawn theme

Store Design
, ,
1

Hi there, so for the past few hours i’ve been trying to figure out how to get this code to work. I know absolutely nothing about code so i went to ChatGPT for help (i know…). They have somewhat created a foundation for the code, however it isn’t working correctly at all.

I’m trying to create an endless loop of logos which appear “infinite” and scroll forever. However right a few sets of logos appear in the middle of the screen, they just scroll off to the left leaving a big gap of white, then they re-appear again.

Any help is very appreciated!

CODE - - - - - - - -

{% schema %}
{
  "name": "Infinite Logo Scroller",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo_1",
      "label": "Logo 1"
    },
    {
      "type": "range",
      "id": "logo_1_size",
      "label": "Logo 1 Size",
      "default": 100,
      "min": 50,
      "max": 300,
      "step": 5
    },
    {
      "type": "image_picker",
      "id": "logo_2",
      "label": "Logo 2"
    },
    {
      "type": "range",
      "id": "logo_2_size",
      "label": "Logo 2 Size",
      "default": 100,
      "min": 50,
      "max": 300,
      "step": 5
    },
    {
      "type": "image_picker",
      "id": "logo_3",
      "label": "Logo 3"
    },
    {
      "type": "range",
      "id": "logo_3_size",
      "label": "Logo 3 Size",
      "default": 100,
      "min": 50,
      "max": 300,
      "step": 5
    },
    {
      "type": "range",
      "id": "logo_spacing",
      "label": "Logo Spacing (px)",
      "default": 10,
      "min": 0,
      "max": 50,
      "step": 1
    },
    {
      "type": "range",
      "id": "animation_speed",
      "label": "Animation Speed (seconds)",
      "default": 10,
      "min": 1,
      "max": 30,
      "step": 1
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    }
  ],
  "presets": [
    {
      "name": "Infinite Logo Scroller",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="infinite-logo-scroller" style="background-color: {{ section.settings.background_color }};">
  <div class="logo-track">
    {% for i in (1..2) %}
      {% for j in (1..3) %}
        {% assign logo_key = 'logo_' | append: j %}
        {% assign logo_size_key = 'logo_' | append: j | append: '_size' %}
        {% assign logo = section.settings[logo_key] %}
        {% assign logo_size = section.settings[logo_size_key] %}
        {% if logo != blank %}
          <div class="logo-slide" style="width: {{ logo_size }}px; margin-right: {{ section.settings.logo_spacing }}px;">
            <img src="{{ logo | img_url: '200x' }}" alt="Brand logo {{ j }}" style="width: 100%; height: auto;">
          </div>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </div>
</div>

<style>
.infinite-logo-scroller {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.logo-track {
  display: flex;
  animation: scroll {{ section.settings.animation_speed }}s linear infinite;
}

.logo-slide {
  flex: 0 0 auto;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var track = document.querySelector('.logo-track');
  var logoSlides = document.querySelectorAll('.logo-slide');
  var totalWidth = 0;

  logoSlides.forEach(function (slide) {
    totalWidth += slide.offsetWidth + parseInt(window.getComputedStyle(slide).marginRight);
  });

  // Set the width of the track to be twice the total width of the logos to ensure seamless scrolling
  track.style.width = totalWidth * 2 + 'px';

  // Adjust the duration of the animation based on the total width and the desired animation speed
  var duration = totalWidth / (track.offsetWidth / {{ section.settings.animation_speed }});
  track.style.animationDuration = duration + 's';
});
</script>
2

Need to make them wider, but anyway.
Had a go with Chat myself and here is the result. Works ok’ish for me:

{% schema %}
{
  "name": "Infinite Logo Scroller",
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo",
          "label": "Logo"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "range",
      "id": "logos_shown",
      "label": "Number of Logos Shown at Once",
      "default": 3,
      "min": 1,
      "max": 5,
      "step": 1
    },
    {
      "type": "range",
      "id": "logo_spacing",
      "label": "Logo Spacing px)",
      "default": 10,
      "min": 0,
      "max": 50,
      "step": 5
    },
    {
      "type": "range",
      "id": "animation_speed",
      "label": "Animation Speed (seconds)",
      "default": 10,
      "min": 1,
      "max": 30,
      "step": 1
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "image_size",
      "label": "Image Size (e.g., 500x500)",
      "default": "200x200"
    }
  ],
  "presets": [
    {
      "name": "Infinite Logo Scroller",
      "category": "Custom"
    }
  ]
}
{% endschema %}

  

    {% assign images_count = 0 %}
    {% capture slides %}
    {% for block in section.blocks %}
      {% assign logo = block.settings.logo %}
      {% if logo %}
        {% assign images_count = images_count | plus: 1 %}
        

          
        

      {% endif %}
    {% endfor %}
    {%  endcapture %}
    {{  slides }}
    
    {{  slides }}   
    {%  if images_count < section.settings.logos_shown %} 
    
    {{  slides }}   
    {% endif %}
3

Hey @LucasAyee , I created one yesterday because I’m working on my new Shopify Theme lol, so it isn’t finished yet. For now, it’s just for mobile view, but I’ll update you when it’s finished. The code is:

{% schema %}
{
  "name": "Logo Carousel",
  "settings": [
    {
      "type": "range",
      "id": "scroll_speed",
      "label": "Scroll Speed (seconds)",
      "default": 20,
      "min": 5,
      "max": 60,
      "step": 1
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo_image",
          "label": "Logo Image"
        },
        {
          "type": "text",
          "id": "logo_alt_text",
          "label": "Alt Text",
          "default": "Logo"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Logo Carousel",
      "category": "Custom"
    }
  ]
}
{% endschema %}

  

    

      {% for block in section.blocks %}
        

          
        

      {% endfor %}
      {% for block in section.blocks %}
        
          
        

      {% endfor %}
1 Like
4

Nice work! I’m looking to use this for my “as seen on” social proof section. Did you ever get this launched for both mobile and desktop views?