Image Slider

<section class="sl-slider" style="padding:clamp(24px,4vw,48px) 0;color:inherit;font-family:inherit;" aria-label="{{ section.settings.heading | default: 'Image gallery' }}">
  <div style="max-width:1400px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem) 1rem;">
    {%- if section.settings.heading != blank -%}
      <header style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;justify-content:space-between;margin:0 0 1rem;">
        <h2 style="margin:0;font-size:clamp(1.35rem,2.5vw,1.85rem);">{{ section.settings.heading }}</h2>
        {%- if section.settings.subheading != blank -%}
          <p style="margin:0;opacity:.75;font-size:.95rem;">{{ section.settings.subheading }}</p>
        {%- endif -%}
      </header>
    {%- endif -%}
  </div>
  <div style="display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem clamp(1rem,3vw,2rem) 1rem;scroll-padding:1rem;">
    {%- for block in section.blocks -%}
      {%- assign slide_fallback = 'https://picsum.photos/seed/slide-' | append: block.id | append: '/960/600' -%}
      <figure style="flex:0 0 clamp(260px,75vw,560px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:.5rem;position:relative;" {{ block.shopify_attributes }}>
        {%- if block.settings.link != blank -%}<a href="{{ block.settings.link }}" style="display:block;color:inherit;text-decoration:none;border-radius:.5rem;overflow:hidden;position:relative;">{%- endif -%}
        <img src="{{ block.settings.image | image_url: width: 1120 | default: slide_fallback }}" alt="{{ block.settings.alt | default: block.settings.caption | default: 'Slide' }}" loading="lazy" style="width:100%;aspect-ratio:{{ section.settings.aspect_ratio | default: '4/3' }};object-fit:cover;display:block;border-radius:.5rem;" />
        {%- if block.settings.caption != blank -%}
          <figcaption style="position:absolute;left:.75rem;bottom:.75rem;right:.75rem;padding:.55rem .8rem;background:rgba(0,0,0,.55);color:#fff;font-size:.85rem;border-radius:.35rem;backdrop-filter:blur(4px);">{{ block.settings.caption }}</figcaption>
        {%- endif -%}
        {%- if block.settings.link != blank -%}</a>{%- endif -%}
      </figure>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Image Slider",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Our latest drops" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Swipe to explore" },
    { "type": "text", "id": "aspect_ratio", "label": "Slide aspect ratio (e.g. 4/3, 16/9)", "default": "4/3" }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Gallery slide" },
        { "type": "text", "id": "caption", "label": "Caption" },
        { "type": "url", "id": "link", "label": "Link (optional)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Slider",
      "blocks": [
        { "type": "slide", "settings": { "caption": "Spring essentials" } },
        { "type": "slide", "settings": { "caption": "Made from recycled wool" } },
        { "type": "slide", "settings": { "caption": "The signature fit" } },
        { "type": "slide", "settings": { "caption": "Inside the workshop" } }
      ]
    }
  ]
}
{% endschema %}