

<div {% render 'section-attr' %} class='slideshow-v1'>
  <xo-carousel class='hero-slider' xo-type='none' xo-rewind xo-speed='500'>
    <xo-carousel-inner>
      <xo-carousel-list>
        {% for block in section.blocks %}
          <xo-carousel-slide>
            <div class='slideshow-v1__item'>
              <xo-animate xo-type='zoom-out' xo-duration='500'>
                <img src='{{ block.settings.image | image_url }}' width="100%" height="auto">
                {% comment %} {%- render 'image', image: block.settings.image -%} {% endcomment %}
              </xo-animate>
              <div
                class='slideshow-v1__content'
                style='
                  {% if block.settings.reverse_layout == false %}
                   left: 0;
                  {% else %}
                   right: 0;
                  {% endif %}
                '
              >
                <xo-animate xo-type='rotate-left-up' xo-order='4'>
                  <h2 class='slideshow-v1__title'>{{ block.settings.title }}</h2>
                </xo-animate>
                <xo-animate xo-type='fade-up' xo-order='5' class='slideshow-v1__desc'>
                  {{ block.settings.desc }}
                </xo-animate>
              </div>
            </div>
          </xo-carousel-slide>
        {% endfor %}
      </xo-carousel-list>
    </xo-carousel-inner>
    <div is='xo-cursor' xo-name='cursor-prev' class='prev-abs'>
      <xo-cursor-item xo-name='cursor-prev' class='slideshow-v1__icon-1'>
        <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#0F0F0F"></path> </g>
        </svg>
      </xo-cursor-item>
      <xo-carousel-prev></xo-carousel-prev>
    </div>
    <div is='xo-cursor' xo-name='cursor-next' class='next-abs'>
      <xo-cursor-item xo-name='cursor-next' class='slideshow-v1__icon-1'>
        <svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#0F0F0F"></path> </g>
        </svg>
      </xo-cursor-item>
      <xo-carousel-next></xo-carousel-next>
    </div>
  </xo-carousel>
</div>

{% schema %}
{
  "name": "t:sections.slideshow_v1.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "t:sections.all.background_type.label",
      "options": [
        {
          "value": "color",
          "label": "t:sections.all.background_type.option__1.label"
        },
        {
          "value": "gradient",
          "label": "t:sections.all.background_type.option__2.label"
        },
        {
          "value": "image",
          "label": "t:sections.all.background_type.option__3.label"
        },
        {
          "value": "video",
          "label": "t:sections.all.background_type.option__4.label"
        }
      ],
      "default": "color"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.background_color.label",
      "alpha": true,
      "visible_if": "{{ section.settings.background_type == 'color' }}"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.background_gradient.label",
      "visible_if": "{{ section.settings.background_type == 'gradient' }}"
    },
    {
      "type": "number",
      "id": "background_margin",
      "label": "t:sections.all.background_margin.label",
      "default": 0
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "slideshow",
      "name": "t:sections.slideshow_v1.settings.blocks.name",
      "settings": [
        {
          "type": "checkbox",
          "id": "reverse_layout",
          "label": "t:sections.slideshow_v1.settings.blocks.reverse_layout.label",
          "default": false
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow_v1.settings.blocks.image.label"
        },
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.slideshow_v1.settings.blocks.title.label",
          "default": "TITLE"
        },
        {
          "type": "text",
          "id": "desc",
          "label": "t:sections.slideshow_v1.settings.blocks.desc.label",
          "default": "Description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow_v1.presets.name"
    }
  ]
}
{% endschema %}
