Created
April 4, 2019 17:41
-
-
Save rotcl/d6beab610be717ddbea9ed2dc6a5b4aa to your computer and use it in GitHub Desktop.
Shopify - Logo Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.