Custom slideshow section

section-custom-slideshow.liquid

{% liquid
  assign blockList = ''
  for block in section.blocks
    assign blockList = blockList | append: block.type | append: ','
  endfor
  assign blockArray = blockList | split: ","


  if section.settings.height == 'image-height'
    assign padding_ratio = 1
    if blockArray[0] == 'image'
      assign padding_ratio = section.blocks[0].settings.image.aspect_ratio
    elsif blockArray[1] == 'image'
      assign padding_ratio = section.blocks[1].settings.image.aspect_ratio
    endif
    assign padding_ratio = 1 | divided_by: padding_ratio | times: 100 | append: '%'
  endif

  assign border_class = ''
  if section.settings.borders
    assign border_class = 'brick--border'
  endif

  assign margin_class = ''
  if section.settings.padding
    assign margin_class = 'brick--margin'
  endif

  assign wrapper_class = ''
  if section.settings.wrapper
    assign wrapper_class = 'wrapper--brick'
  endif

  assign transparent_header = false

  assign animation_anchor = "[data-section-id='" | append: section.id | append: "']"
%}

<section data-section-id="{{ section.id }}"
  data-section-type="custom-content"
  data-overflow-wrapper
  {% if transparent_header %}data-overlay-header{% endif %}
  style="--padding-ratio: {{ padding_ratio | default: '100%' }}"
  class="brick__section brick--{{ section.blocks.size }} {{ margin_class }} {{ border_class }} {{ wrapper_class }} {{ section.settings.height }} {{ swaparoo_class }}">

        {%- liquid
          assign kicker_line_class = ''
          if block.settings.title == blank
            assign kicker_line_class = 'kicker__line'
          endif

          assign ratio = section.settings.bg_color | color_desaturate: 100 | color_contrast: '#ffffff'
          assign ratio_accent = section.settings.bg_color | color_desaturate: 100 | color_contrast: '#ffffff'
          assign dark_class = ''
          assign dark_class_accent = ''
          if ratio > 4
            assign dark_class = 'palette--dark'
          endif

          if ratio_accent > 4
            assign dark_class_accent = 'palette--dark'
          endif

        -%}          
        <div class="brick__block {{ dark_class }}" data-prevent-transparent-header >
          <div class="brick__block__text brick__block__text--slider {{ section.settings.text_color }}" data-overflow-frame style="--bg: {{ section.settings.bg_color }}; --bg-accent: {{ section.settings.bg_accent }};">
            <div class="brick__block__product__inner">
              <div class="text__standard {{ section.settings.align_text }}" data-overflow-content>
                {% if section.settings.kicker != blank %}
                  <p class="standard__kicker {{ kicker_line_class }}"
                    data-aos="hero"
                    data-aos-anchor="{{ animation_anchor }}"
                    data-aos-order="1">
                    {{ section.settings.kicker }}
                  </p>
                {% endif %}
                
                <div class="brick__collection flickity-badge-dots" data-slider data-show-dots="true">
                  {% for block in section.blocks %}
                  
                    <div class="brick__product {{ dark_class_accent }}" style="--bg-accent: {{ section.settings.bg_accent }};" {{ block.shopify_attributes }}>                 
                      
                    {%- liquid
                      assign double_img = false
                      if block.settings.image_double
                        assign double_img = true
                      endif

                      assign img_ratio = block.settingsimage.aspect_ratio | default: 1
                      assign image_ratio = 1 | divided_by: img_ratio | times: 100
                      if section.settings.scale_image
                        assign multiplier = section.settings.aspect_ratio
                        assign inverse_ratio = 1 | divided_by: img_ratio
                        assign top_offset =  1 | divided_by: img_ratio | times: 100 | divided_by: 2
                        assign top_offset_subtractor =  multiplier | times: 100 | divided_by: 2
                      else
                        assign image_ratio = settings.product_grid_aspect_ratio | times: 100
                      endif
                    -%}

                    {%- if section.settings.scale_image -%}
                      {%- capture auto_height -%}
                        {%- if inverse_ratio > multiplier -%}
                          style="width:{{ img_ratio | times: multiplier | times: 100 }}%; margin: 0 auto;"
                        {%- else -%}
                          style="padding:{{ top_offset_subtractor | minus: top_offset }}% 0;"
                        {%- endif -%}
                      {%- endcapture -%}
                    {%- endif -%}                      
                      
                      
                      <div class="product-grid-item">
                        <div {{ auto_height }}>
                          <a href="{{ block.settings.link }}" data-grid-link class="lazy-image{% if double_img %} double__image{% endif %}" aria-label="{{ product.title | strip_html | escape }}" style="padding-top:{{ image_ratio }}%; background-image:  url('{{ block.settings.image | img_url: '1x1' }}');">
                            <div class="lazyload fade-in collection__image__top"
                              data-bgset="{% render 'bgset', image: block.settings.image %}" 
                              role="img"
                              aria-label="{{ block.settings.image.alt | default: block.settings.title | strip_html | escape }}"></div>
                            {% if double_img %}
                              <div class="collection__image__bottom">
                                {%- assign img_url = block.settings.image_double | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                                <img data-src="{{ img_url }}"
                                  class="lazyload img-object-cover lazypostload-desktop"
                                  width="{{ block.settings.image_double.width }}"
                                  height="{{ block.settings.image_double.height }}"
                                  data-widths="[110, 160, 220, 320, 480, 540, 720, 900]"
                                  data-sizes="auto"
                                  data-aspectratio="{{ block.settings.image_double.aspect_ratio }}"
                                  alt="{{ block.settings.image_double.alt | strip_html | escape }}">
                              </div>
                            {% endif %}
                            <div class="product-grid-item__slide" data-grid-slide></div>
                          </a>
                        </div>
                        <noscript>
                          <a href="{{ block.settings.link }}">
                            <img class="responsive-wide-image" src="{{ block.settings.image | img_url: '360x' }}" alt="{{ block.settings.image.alt | default: block.settings.title | strip_html | escape }}">
                            {{ badge }}
                          </a>
                        </noscript>
                        <div class="product__grid__info {{ block.settings.text_align }}" data-swapper-wrapper>
                          <a href="{{ block.settings.link | capitalize }}">
                            <div class="product__grid__title__wrapper">
                              <p class="product__grid__title">
                                {{ block.settings.title }}
                              </p>
                            </div>
                            <p class="product__grid__price">
                                {{ block.settings.richtext }}
                            </p>
                          </a>

                        </div>
                      </div>

                 
                     </div>
                  {% endfor %}                 
                  
                  
                  
                </div>
              </div>
            </div>
          </div>
        </div>

</section>

{% schema %}
{
  "name": "Custom slideshow",
  "settings": [
  {
    "type": "text",
    "id": "kicker",
    "label": "Kicker",
    "default": "Shop the look"
  },
  {
    "type": "header",
    "content": "Style"
  },
  {
    "type": "select",
    "id": "align_text",
    "label": "Text alignment",
    "default": "text-center",
    "options": [
      { "value": "text-left","label": "Left" },
      { "value": "text-center","label": "Centered" },
      { "value": "text-right","label": "Right" }
    ]
  },
  {
    "type": "select",
    "id": "height",
    "label": "Section height",
    "default": "use_screen_one_half",
    "options": [
      { "value": "use_screen_full", "label": "Full screen height"},
      { "value": "use_screen_three_quarters", "label": "Three quarters of screen height"},
      { "value": "use_screen_two_thirds", "label": "Two thirds of screen height"},
      { "value": "use_screen_one_half", "label": "One half of screen height"},
      { "value": "use_screen_one_third", "label": "One third of screen height"},
      { "value": "use_screen_one_fifth", "label": "One fifth of screen height"},
      { "value": "use_pixels_800", "label": "800px" },
      { "value": "use_pixels_650", "label": "650px" },
      { "value": "use_pixels_500", "label": "500px" },
      { "value": "image-height", "label": "Image height" }
    ]
  },
  {
    "type": "checkbox",
    "id": "padding",
    "label": "Add spacing",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "borders",
    "label": "Add borders",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "wrapper",
    "label": "Contain width",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "scale_image",
    "label": "Scale images",
    "default": true
  },
  {
    "type": "range",
    "id": "aspect_ratio",
    "min": 0.5,
    "max": 1.5,
    "step": 0.1,
    "unit": ":1",
    "label": "Image scaling ratio",
    "info": "Wide to tall",
    "default": 1
  },
  {
    "type": "select",
    "id": "text_color",
    "label": "Text color",
    "default": "text--neutral",
    "options": [
      { "value": "text--neutral", "label": "Normal text"},
      { "value": "text--white", "label": "White"},
      { "value": "text--primary", "label": "Primary accent"},
      { "value": "text--secondary", "label": "Secondary accent"},
      { "value": "text--black", "label": "Black"},
      { "value": "text--invert--primary", "label": "Primary dark accent"},
      { "value": "text--invert--secondary", "label": "Secondary dark accent"},
      { "value": "text--invert", "label": "Inverted text color"}
    ]
  },
  {
    "type": "color",
    "id": "bg_color",
    "label": "Background",
    "default": "#f7f7f7"
  },
  {
    "type": "color",
    "id": "bg_accent",
    "label": "Background accent",
    "default": "#ffffff"
  }
],
"blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "image_picker",
          "id": "image_double",
          "label": "Image Flip"
        },
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Headline"
        },
        {
          "type": "textarea",
          "id": "richtext",
          "label": "Text"
        },
        {
          "type": "select",
          "id": "text_align",
          "label": "Alignment",
          "default": "text-center",
          "options": [
            { "value": "text-left","label": "Left" },
            { "value": "text-center","label": "Centered" },
            { "value": "text-right","label": "Right" }
          ]
        },
        {
          "type": "header",
          "content": "Link"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
],
  "presets": [
    {
      "name": "Custom slideshow",
      "category": "Image",
      "blocks": [
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}