<style>
{% if section.settings.slideshow_height == "full" %} 
  #shopify-section-{{section.id}} .slideshow__image, #shopify-section-{{section.id}} .slideshow__link, #shopify-section-{{section.id}} .placeholder-background {
    position: relative;
 
  }
 #shopify-section-{{section.id}} .slideshow__video--background {position: absolute;}
  #shopify-section-{{section.id}} .slick-dots {bottom:22px;}
  {% endif %}
    /*===== START BORDER STYLE CSS =====*/
    {% if section.settings.heading_divider == 'none' %} 
  #shopify-section-{{section.id}} .slideshow-wrapper .border_width {border:none;}
  {% endif %}
  {% unless section.settings.heading_divider == 'none'%}
  #shopify-section-{{section.id}} .slideshow-wrapper .border_width {
    {% if section.settings.heading_divider == 'small' %}
    width:33.333%;
    border-top:3px solid {{settings.color_image_overlay_text}};
    display: inline-block;
    position: relative;
    top: 4px;
    {% elsif section.settings.heading_divider == 'full' %}
    width:100%;
    border-top:3px solid {{settings.color_image_overlay_text}};
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 0px;
    {% endif %}
  }
  {% if section.settings.heading_divider == 'medium' %}  
   #shopify-section-{{section.id}} .slideshow-wrapper .mega-title {
    border-bottom: 3px solid {{settings.color_image_overlay_text}};
    display: inline-block;
    padding-bottom: 14px;
    margin-bottom: 5px;
}
   #shopify-section-{{section.id}} .slideshow-wrapper .border_width {border:none;}
  
  {% endif %}
  {% endunless %}

   /*===== END BORDER STYLE CSS =====*/
  

  
  </style>

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
        <span class="slideshow__pause-stop">
          {% include 'icon-pause' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
        </span>
        <span class="slideshow__pause-play">
          {% include 'icon-play' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
        </span>
      </button>

      <div {% if section.settings.slideshow_height != "full" %}class="slideshow slideshow--{{ section.settings.slideshow_height }}"{% endif %} id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed }}">
        {% for block in section.blocks %}
          {%- assign is_background_video = false -%}
          {% if block.type == 'video' %}
            {% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
              {%- assign is_background_video = true -%}
            {% endif %}
          {% endif %}

          <div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="slideshow__link">
            {% endif %}

            {% if block.type == 'video' %}
              {% if block.settings.video_url != blank %}
                <div class="video-loader"></div>
              {% endif %}
              {% unless block.settings.video_type == 'background' %}
                <button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
                  {% include 'icon-close' %}
                  <span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
                </button>
              {% endunless %}
              {% if block.settings.video_url != blank %}
                <div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
                  data-id="{{ block.settings.video_url.id }}"
                  data-type="{{ block.settings.video_type }}"
                  data-slideshow="Slideshow-{{ section.id }}"></div>
              {% endif %}
            {% endif %}

            {% if block.settings.image == blank %}
              <div class="slideshow__image js">
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              </div>
            {% else %}
                {% if section.settings.slideshow_height == "full" %}
                <div class="slideshow__image">
                 <img src="{{ block.settings.image | img_url: '1920x' }}">
                </div>
                  {% else %}
              <div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover"
                   style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
              </div>
                {% endif %}
            {% endif %}

            <noscript>
              <div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
                {% if block.settings.image == blank %}
                  <div class="placeholder-background">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            </noscript>
            <div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
              <div class="slideshow__text-content">
                <div class="page-width">
                  {% unless block.settings.title == blank %}
                    <h2 class="h1 mega-title slideshow__title imgsldover{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                      {{ block.settings.title | escape }}
                    </h2>
                   <div class="border_width"></div>
                  {% endunless %}
                  {% unless block.settings.subheading == blank %}
                    <span class="mega-subtitle slideshow__subtitle imgsldover_sub {% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                      {{ block.settings.subheading | escape }}
                    </span>
                  {% endunless %}
                  {% if block.settings.button_label != blank and block.settings.link != blank %}
                  <p class="btn hero__btn">
                    {{ block.settings.button_label | escape }}
                  </p>
                  {% endif %}
                  {% if block.type == 'video' %}
                    {% unless block.settings.video_type == 'background' %}
                      <div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
                        <button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
                          {% include 'icon-play-video' %}
                          <span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
                        </button>
                      </div>
                    {% endunless %}
                  {% endif %}
                </div>
              </div>
            </div>

            {% if block.settings.link != blank %}
              </a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Slideshow",
    "max_blocks": 4,
    "settings": [
	  {
        "type": "header",
        "content": "Slideshow [NEED HELP?](https:\/\/help.boostertheme.com\/hc\/en-us\/articles\/360002080914-How-to-setup-Slideshow-section-in-Booster-2-0)"
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto-rotate slides",
        "default": true
      },
      {
        "type": "select",
        "id": "autoplay_speed",
        "label": "Change slides every",
        "options": [
          { "value": "5000", "label": "5 seconds" },
          { "value": "6000", "label": "6 seconds" },
          { "value": "7000", "label": "7 seconds" },
          { "value": "8000", "label": "8 seconds" },
          { "value": "9000", "label": "9 seconds" },
          { "value": "10000", "label": "10 seconds" }
        ],
        "default": "7000"
      },
      {
        "type": "select",
        "id": "slideshow_height",
        "label": "Section height",
        "default": "small",
        "options": [
          {
            "label": "Small",
            "value": "small"
          },
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          },
		  {
            "label": "Full",
            "value": "full"
          }
        ]
      },
      {
        "type": "select",
        "id": "text_size",
        "label": "Text size",
        "default": "medium",
        "options": [
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          }
        ]
      },
      {
        "type": "select",
        "id": "heading_divider",
        "label": "Heading Divider",
        "default": "none",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "1/3 Title"
          },
          {
            "value": "medium",
            "label": "Title wide"
          },
          {
            "value": "full",
            "label": "Section width"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "alignment",
            "label": "Image alignment",
            "default": "top",
            "options": [
              {
                "value": "top",
                "label": "Top"
              },
              {
                "value": "center",
                "label": "Middle"
              },
              {
                "value": "bottom",
                "label": "Bottom"
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Image slide"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading",
            "default": "Tell your brand's story through video and images"
          },
      	  {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
      	  },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          }
        ]
      },
      {
        "type": "video",
        "name": "Video slide",
        "settings": [
          {
            "type": "video_url",
            "id": "video_url",
            "label": "Video link",
            "accept": ["youtube"],
            "default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
          },
          {
            "type": "select",
            "id": "video_type",
            "label": "Style",
            "options": [
              {
                "value": "chrome",
                "label": "Image with play button"
              },
              {
                "value": "background-chrome",
                "label": "Background video with play button"
              },
              {
                "value": "background",
                "label": "Background video"
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "Fallback when autoplaying video is not supported on mobile devices"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Video slide"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading",
            "default": "Tell your brand's story through video and images"
          },
      	  {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
      	  },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "category": "Image",
        "settings": {
          "autoplay": true,
          "autoplay_speed": "5000"
        },
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
	]
  }
{% endschema %}
