Problemi con codice liquid

[nailheavenn]

Salve,

Ho creato un’immagine before/after ma purtroppo mi appare un bug che non sono come sistemare, il bottone è “duplicato” e appare sulla collezione prima dell’immagine.

Questo è il sito:

www.nailheaven.it

e il codice:

{% assign unique_id = ‘ba_slider_’ | append: section.id %}

Prima

Dopo

{{ section.settings.ba_heading }}

{{ section.settings.ba_content }}

{% schema %}
{
“name”: “Before / After Slider”,
“settings”: [
{
“type”: “header”,
“content”: “Subscribe to our channel”
},
{
“id”:“bf_image”,
“type”:“image_picker”,
“label”:“Before Image”
},
{
“id”:“af_image”,
“type”:“image_picker”,
“label”:“After Image”
},
{
“type”: “checkbox”,
“id”: “show_badge”,
“label”: “Show Badges”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “grayscale_before”,
“label”: “Grayscale for Before Image”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_content”,
“label”: “Show content”,
“default”: false
},
{
“id”:“ba_heading”,
“type”:“text”,
“label”:“Heading”
},
{
“id”:“ba_content”,
“type”:“richtext”,
“label”:“Content”
}
],
“presets”:[
{
“name”:“Before / After Slider”
}
]
}
{% endschema %}

{% javascript %}
{% endjavascript %}

{% if section.settings.show_content == true %} .container{ width: calc(50% - 20px); } {% else %} .container{ width: 50%; margin: 0 auto; } {% endif %} .ba_main { display: flex; place-items: center; flex-wrap: wrap; gap: 30px; padding: 0 5rem; max-width: 1200px; width: 100%; margin: 50px auto; } img { display: block; max-width: 100%; } .container { display: grid; /* place-content: center; */ position: relative; overflow: hidden; border-radius: 1rem; --position: 50%; } .image-container { max-width: 1200px; } .before_badge { z-index: 99 !important; position: absolute; bottom: 15px; left: 15px; background: #fff; padding: 0 5px; border-radius: 5px; color: #000; } .after_badge { z-index: 99 !important; position: absolute; bottom: 15px; right: 15px; background: #fff; padding: 0 5px; border-radius: 5px; color: #000; } .slider-image { width: 100%; height: 100%; object-fit: cover; object-position: left; max-height: 500px; } .image-before { position: absolute; inset: 0; width: var(--position); {% if section.settings.grayscale_before %}filter: grayscale(100%);{% endif %} } .ba-slider { position: absolute; inset: 0; cursor: pointer; opacity: 0; /* for Firefox */ width: 100%; height: 100%; } .ba-slider:focus-visible ~ .slider-button { outline: 5px solid black; outline-offset: 3px; } .slider-line { position: absolute; inset: 0; width: .2rem; height: 100%; background-color: #fff; /* z-index: 10; */ left: var(--position); transform: translateX(-50%); pointer-events: none; } .slider-button { position: absolute; background-color: #fff !important; color: black; padding: .5rem; border-radius: 100vw; display: grid; place-items: center; top: 50%; left: var(--position); transform: translate(-50%, -50%); pointer-events: none; /* z-index: 100; */ box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5); } @media only screen and (max-width: 768px) { .container{ width: 100%; } .ba_main{ padding: 0 20px; } }