Shopify CSS marquee loads late when blocks are used

Technical Q&A
, ,
2

Hello @vaishnavi_s0129 ,

We are OneExperts from OneCommerce and we’re to support you.

According to your code provided, we edited it a little bit. You may want to try this new edit version:


{% case section.blocks.size %}
 {% when 3 %}
   {% assign keyframe = 900 %}
   {% assign width = 600 %}
 {% when 4 %}
   {% assign keyframe = 1200 %}
   {% assign width = 900 %}
 {% when 5 %}
   {% assign keyframe = 1500 %}
   {% assign width = 1200 %}
 {% when 6 %}
   {% assign keyframe = 1800 %}
   {% assign width = 1500 %}
 {% when 7 %}
   {% assign keyframe = 2100 %}
   {% assign width = 1800 %}
 {% when 8 %}
   {% assign keyframe = 2400 %}
   {% assign width = 2100 %}
 {% when 9 %}
   {% assign keyframe = 2700 %}
   {% assign width = 2400 %}
 {% when 10 %}
   {% assign keyframe = 3000 %}
   {% assign width = 2700 %}
{% endcase %}

<style>
.logo_list--marquee {
  display: flex;
  overflow-x: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 100%;
  height: 200px;
}

.marquee--content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: {{ width }}px;
  animation: slide-left {{ section.settings.marquee_speed }}s linear infinite;
}

@keyframes slide-left {
 from { 
  transform: translateX(0); 
 }
 to { 
  transform: translateX(-{{ keyframe }}px); 
 }
} 
</style>

<div class="row logo_list--marquee">
  <div class="marquee--content">
   {% for block in section.blocks %}
     <div class="col-md-4 col-sm-6 col-6 logo_list--logo">
       {% if block.link != blank %}
         <a href="{{ block.link }}">
      {% endif %}
<div class="logo__img">
 {% if block.image != blank %}
   {{ block.image | image_url: width: 1500 | image_tag:
      width: block.image.width,
      height: block.image.height,
      widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
      alt: block.image.alt | escape }}
  {% else %}
     {{ 'logo' | placeholder_svg_tag: 'logo-list__placeholder' }}
  {% endif %}
 </div>
 {% if block.link != blank %}
   </a>
 {% endif %}
</div>
{% endfor %}

{% if section.blocks.size >= 3 and section.settings.marquee %}
 {% for block in section

Hope this is helpful for you. Please don’t be hesitate to contact us for any further assistance.

If you found our answer is helpful, please hit the Like Button or mark it as Accepted Solution to let us know, it means a lot to us.

Best regards,

OneCommerce team.