Shopify - Logo Slider

logo-slider.liquid

{% comment %}
    @rotcl
{% endcomment %}


{% assign default = '1400x' %}
{% assign size1 = '480x' %}
{% assign size2 = '765x' %}
{% assign size3 = '900x' %}
{% assign size4 = '1000x' %}
{% assign size5 = '1100x' %}
{% assign size6 = '1300x' %}
{% assign size7 = '1500x' %}
{% assign size8 = '1700x' %}
{% assign size9 = '1900x' %}
{% assign size10 = '2000x' %}

<div class="logo-bar-section container">
  <div class="sixteen columns">
    <div class="section clearfixr">
    {% if section.settings.title != blank %}
        <h2 class="title center">{{ section.settings.title | escape }}</h2>
        <div class="feature_divider no-margin"></div>
    {% endif %}

    {% if section.blocks.size > 0 %}
      <div class="container">
  <div class="brands">
    <div class="brands__preWrapper">
      <div class="logo-bar brands__wrapper">
        {% for block in section.blocks %}
          <div class="logo-bar__item" {{ block.shopify_attributes }}>
            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="logo-bar__link">
            {% endif %}
            {% if block.settings.image != blank %}
              <img  src="{{ block.settings.image | img_url: '100x' }}"
                alt="{{ block.settings.image.alt | escape }}"
                class="lazyload {{ settings.image_loading_style }}"
                style="max-width: {{- block.settings.image.width -}}px;"
                data-sizes="auto"
                data-src="{{ block.settings.image | img_url: default }}"
                data-srcset="
                {{ block.settings.image | img_url: default }} {{default | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size1 }} {{size1 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size2 }} {{size2 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size3 }} {{size3 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size4 }} {{size4 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size5 }} {{size5 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size6 }} {{size6 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size7 }} {{size7 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size8 }} {{size8 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size9 }} {{size9 | replace: 'x', 'w'}},
                {{ block.settings.image | img_url: size10 }} {{size10 | replace: 'x', 'w'}}"
                 />
            {% else %}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
            {% if block.settings.link != blank %}
              </a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    </div>
  </div>
</div>
      </div>
    </div>
  </div>


<style>
    .brands {
      position: relative;
      overflow: hidden;
      height: 8.5rem;
    }
    
    .brands:hover .brands__wrapper,
    .brands:hover .brands__preWrapper {
      animation-play-state: paused;
    }
    
    .brands__preWrapper {
      position: relative;
      width: 100%;
      height: 8.5rem;
      transform: translateX(0%);
      animation: scroll1 10s linear infinite;
      animation-delay: 4s;
      animation-direction: alternate;
    
      will-change: transform;
    }
    
    .brands__wrapper {
      position: absolute;
      white-space: nowrap;
      transform: translateX(0%) translateZ(0);
      animation: scroll2 10s linear infinite;
      animation-delay: 4s;
      animation-direction: alternate;
    
      will-change: transform;
    }
    
    .brands__wrapper > a,
    .brands__wrapper > img {
      position: relative;
      display: inline-block;
      margin: 0 1rem;
      vertical-align: middle;
    }
    
    .brands__wrapper > a img {
      max-width: 15rem;
      max-height: 8.5rem;
    }
    
    @keyframes scroll1 {
      0% {
        transform: translateX(-0%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    @keyframes scroll2 {
      0% {
        transform: translateX(0%) translateZ(0);
      }
      100% {
        transform: translateX(-100%) translateZ(0);
      }
    }
</style>

{% schema %}
  {
    "name": "Logo Slider",
    "class": "logo-list-section",
    "max_blocks": 30,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"
      }
    ],
    "blocks": [
      {
        "type": "logo_image",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "400 x 300px recommended"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo Slider",
        "category": "Custom",
        "blocks": [
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          }
        ]
      }
    ]
  }
{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Logo bar con movimiento / Logo Slider

Para usar el slider de logo solo hay que crear la sección logo-slider.liquid y configurar en el Customize las opciones de logos.

i used this code and only one logo shows and slides. the rest of the logo doesnt show in the front end, have you checked this code recently?

i used this code and only one logo shows and slides. the rest of the logo doesnt show in the front end, have you checked this code recently?

Same here also they’re displaying vertical