
  {%- assign _show_slideshow = section.settings.show_slideshow -%}
  {%- assign _hide_mobile = section.settings.hide_mobile -%}
  {%- assign _full_height = section.settings.full_height -%}
  {%- assign _lazyload = section.settings.lazyload -%}
  {%- assign _layout = section.settings.layout -%}

  {% capture emptyImage %}
    <div class="image">
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {% endcapture %}

  {% if _show_slideshow %}
  <div class="slideshow-01 slideshow-catalog-wrapper{% if section.settings.enable_three_banner %} sidebar-banner{% endif %}">
    <div class="bc-wrapper{% if _full_height %} full-height{% endif %}{% if _layout == 'full' %} no-padding{% endif %}{% if _hide_mobile %} d-none d-md-block{% endif %}" style="background-color: {{ section.settings.background }};">
        
      <div class="bc-home-slideshow">
        {% if section.blocks.size > 0 %}
          <div class="home-slideshow-wrapper swiper-container swiper-container-01" data-autoplay="{{ section.settings.autoplay }}" data-time="{{ section.settings.autoplay_speed }}" data-animation="{{ section.settings.animation }}">
            <div class="home-slideshow swiper-wrapper">

              {% for block in section.blocks %}
                {% if block.type == 'image' %}
                  {%- assign image = block.settings.image -%}
                  {%- assign video = block.settings.video -%}
                  {%- assign link = block.settings.link -%}
                  {%- assign textAlign = block.settings.alignment -%}
                  {%- assign position = block.settings.position -%}
                  {%- assign headingText = block.settings.heading -%}
              	{%- assign headingBoldText = block.settings.heading_bold -%}
                  {%- assign headingAnimation = block.settings.heading_animation -%}
                  {%- assign headingAnimationDelay = block.settings.heading_animation_delay -%}
                  {%- assign headingColor = block.settings.heading_color -%}
                  {%- assign headingSize = block.settings.heading_size -%}
                  {%- assign subheadingText = block.settings.subheading -%}
              	{%- assign subheadingBoldText = block.settings.subheading_bold -%}
                  {%- assign subheadingAnimation = block.settings.subheading_animation -%}
                  {%- assign subheadingAnimationDelay = block.settings.subheading_animation_delay -%}
                  {%- assign subheadingColor = block.settings.subheading_color -%}
                  {%- assign subheadingSize = block.settings.subheading_size -%}
                  {%- assign captionText = block.settings.caption -%}
              	{%- assign captionBoldText = block.settings.caption_bold -%}
                  {%- assign captionAnimation = block.settings.caption_animation -%}
                  {%- assign captionAnimationDelay = block.settings.caption_animation_delay -%}
                  {%- assign captionColor = block.settings.caption_color -%}
                  {%- assign captionSize = block.settings.caption_size -%}
                  {%- assign captionText_2 = block.settings.caption_2 -%}
                {%- assign captionBoldText_2 = block.settings.caption_bold_2 -%} 
                  {%- assign captionAnimation_2 = block.settings.caption_animation_2 -%}
                  {%- assign captionAnimationDelay_2 = block.settings.caption_animation_delay_2 -%}
                  {%- assign captionColor_2 = block.settings.caption_color_2 -%}
                  {%- assign captionSize_2 = block.settings.caption_size_2 -%}  

                  {%- assign buttonText = block.settings.button_text -%}              
                  {%- assign buttonAnimation = block.settings.button_animation -%}
                  {%- assign buttonAnimationDelay = block.settings.button_animation_delay -%}

                  {% unless image == blank  %}
                    <div class="swiper-slide{% unless video == blank %} has-video{% endunless %} swiper-slide-{{ block.id }}{% if _lazyload %} lazyload{% endif %}" style="background-image:url({{ block.settings.image | img_url: '1920x' }}); width: 100%;">
                      <a href="{{ link }}"><img src = "{{ block.settings.image | img_url: '1920x' }}" alt="" /></a>

                        <div class="swiper-content {{ textAlign }} slide-{{ forloop.index }} container{% if section.settings.fix_text_box_position %} fix-textbox{% endif %}" style="top: {{ position }};">
                          <div class="container-box">

                                {% unless headingText == blank %}<div class="heading bold-{{ headingBoldText }}">{{ headingText }}</div>{% endunless %}

                                {% unless subheadingText == blank %}<div class="subheading bold-{{ subheadingBoldText }}">{{ subheadingText }}</div>{% endunless %}

                                {% unless captionText == blank %}<div class="cation bold-{{ captionBoldText }}">{{ captionText }}</div>{% endunless %}

                                {% unless captionText_2 == blank %}<div class="cation-2 bold-{{ captionBoldText_2 }}">{{ captionText_2 }}</div>{% endunless %}

                                {% unless buttonText == blank %}
                                  <div class="caption-link">
                                    <a class="slider-button btn btn-1" href="{{ link }}">{{ buttonText }}</a>                
                                  </div>
                                {% endunless %}

                                <style type="text/css">
                                  .swiper-slide-{{ block.id }}.swiper-slide-active .heading{
                                    color: {{ headingColor }}; font-size: {{ headingSize }}; -webkit-animation-name: {{headingAnimation }}; animation-name: {{ headingAnimation }}; -webkit-animation-delay: {{ headingAnimationDelay }}; animation-delay: {{ headingAnimationDelay }};
                                  }
                                  .swiper-slide-{{ block.id }}.swiper-slide-active .subheading{
                                    color: {{ subheadingColor }}; font-size: {{ subheadingSize }}; -webkit-animation-name: {{ subheadingAnimation }}; animation-name: {{ subheadingAnimation }}; -webkit-animation-delay: {{ subheadingAnimationDelay }}; animation-delay: {{ subheadingAnimationDelay }};
                                  }
                                  .swiper-slide-{{ block.id }}.swiper-slide-active .cation{
                                    color: {{ captionColor }}; font-size: {{ captionSize }}; -webkit-animation-name: {{ captionAnimation }}; animation-name: {{ captionAnimation }}; -webkit-animation-delay: {{ captionAnimationDelay }}; animation-delay: {{ captionAnimationDelay }};
                                  }
                                  .swiper-slide-{{ block.id }}.swiper-slide-active .cation-2{
                                    color: {{ captionColor_2 }}; font-size: {{ captionSize_2 }}; -webkit-animation-name: {{ captionAnimation_2 }}; animation-name: {{ captionAnimation_2 }}; -webkit-animation-delay: {{ captionAnimationDelay_2 }}; animation-delay: {{ captionAnimationDelay_2 }};
                                  }
                                  .swiper-slide-{{ block.id }}.swiper-slide-active .caption-link{
                                    -webkit-animation-name: {{ buttonAnimation }}; animation-name: {{ buttonAnimation }}; -webkit-animation-delay: {{ buttonAnimationDelay }}; animation-delay: {{ buttonAnimationDelay }};
                                  }                                                                                                             
                                </style>

                            </div> 

                          </div>

                          {% unless video == blank %}
                            <div class="video-slide" style="display: none;">
                              <video controls class="video lazyload" autoplay="" loop="" muted="" preload="auto" data-width="0" data-height="0">
                                <source src="{{ video }}" type="video/mp4">
                              </video>
                            </div>
                          {% endunless %}

                    </div>

                  {% else %}

                    <div class="swiper-slide">
                      <a href="{{ link }}">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</a>
                    </div>

                  {% endunless %}

                {% endif %}
              {% endfor %}

            </div>
          </div>

          <div class="btn-pagination">
            {% if section.settings.paging %}
              <div class="swiper-pagination swiper-pagination-01 swiper-pagination-white"></div>
            {% endif %}

            {% if section.settings.navigator %}
              <div class="swiper-button-next swiper-button-next-01 swiper-button-white"></div>
              <div class="swiper-button-prev swiper-button-prev-01 swiper-button-white"></div>
            {% endif %}
          </div>

          <script>
            jQuery(document).ready(function($) {
              if ( bcMsieVersion.MsieVersion() == 0 ){ AT_Main.homeSlideshow(); }
              else{ AT_Main.homeIE();}
            });
          </script>

        {% else %}

        <div class="home-slideshow-wrapper swiper-container">
          <div class="home-slideshow swiper-wrapper">

            <div class="swiper-slide">
              <a href="{{ link }}">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</a>
            </div>

          </div>
        </div>

        {% endif %}
      </div>

      {% if section.settings.enable_three_banner %}
        <div class="bc-three-banner">

          {% unless section.settings.three_image_1 == blank %}
            <a href="{{ section.settings.three_link_1 }}">
              <img src="{{ section.settings.three_image_1 | img_url: '370x' }}'" alt="Banner" />
            </a>
          {% endunless %}

          {% unless section.settings.three_image_2 == blank %}
            <a href="{{ section.settings.three_link_2 }}">
              <img src="{{ section.settings.three_image_2 | img_url: '370x' }}'" alt="Banner" />
            </a>
          {% endunless %}

        </div>
      {% endif %}
      
    </div>
  </div>
  {% endif %}



{% schema %}
{
  "name": "Slideshow",
  "settings": [
    {
      "type": "paragraph",
      "content": "Created by 'Slideshow' section. Please try to keep your slideshow images the same size."
    },
    {
      "id": "title",
      "type": "text",
      "label": "Section Label",
      "default": "Slideshow"
    },
    {
      "type": "checkbox",
      "id": "show_slideshow",
      "label": "Show slideshow",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "lazyload",
      "label": "Enable Lazy loading",
      "default": true
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "checkbox",
      "id": "hide_mobile",
      "label": "Visibility: hide for mobile"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Section Layout Mode",
      "default": "boxed",
      "options": [
        {
          "value": "boxed",
          "label": "Boxed"
        },
        {
          "value": "full",
          "label": "Wide"
        }
      ]
    },
	{
      "type": "checkbox",
      "id": "full_height",
      "label": "Show slideshow full screen",
      "default": true
    },
	{
      "type": "color",
      "id": "background",
      "label": "Background color",
      "default": "#fff"
    },
    {
      "type": "header",
      "content": "Auto Slides"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Auto rotate between 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": "6000"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Slideshow Animation",
      "default": "slide",
      "options": [
        {
          "label": "Fade",
          "value": "fade"
        },
        {
          "label": "Slide",
          "value": "slide"
        },
		{
          "label": "Cube",
          "value": "Cube"
        },
		{
          "label": "Coverflow",
          "value": "coverflow"
        }
      ]
    },
    {
      "type": "header",
      "content": "Navigator"
    },
	{
      "type": "checkbox",
      "id": "navigator",
      "label": "Show Navigator Next Prev",
      "default": true
    },
	{
      "type": "checkbox",
      "id": "paging",
      "label": "Show Bullet at Bottom",
      "default": false
    },
	{
      "type": "header",
      "content": "Block two images"
	},
    {
      "type": "checkbox",
      "id": "enable_three_banner",
      "label": "Enable block two images",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "three_image_1",
      "label": "Image 01"
    },
	{
      "type": "url",
      "id": "three_link_1",
      "label": "Link 01"
    },
	{
      "type": "image_picker",
      "id": "three_image_2",
      "label": "Image 02"
    },
	{
      "type": "url",
      "id": "three_link_2",
      "label": "Link 02"
    },
    {
      "type": "header",
      "content": "Layout Content"
    },
    {
      "type": "checkbox",
      "id": "fix_text_box_position",
      "label": "Fixed Content Position",
      "info": "Use when always show vertical menu in Theme Settings > Header Menu."
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Slideshow",
      "limit": 6,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
		{
          "type": "textarea",
          "id": "video",
          "label": "The url of video",
          "info": "Go to Settings > Files > click 'Upload files' to upload your video, then copy the url and paste to here"
        },
		{
          "type": "text",
          "id": "link",
          "label": "Slideshow link to",
          "default": "/collections"
        },
        {
          "type": "header",
          "content": "TEXT BOX LAYOUT",
          "info": "heading,subheadings,button"
        },
        {
          "type": "text",
          "id": "position",
          "label": "Vertical Position",
          "info": "Distance from bottom of the image. used percent (eg: 10%)",
          "default": "10%"
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Text alignment",
          "default": "text-center",
          "options": [
            {
              "value": "text-left",
              "label": "Left"
            },
            {
              "value": "text-center",
              "label": "Middle"
            },
            {
              "value": "text-right",
              "label": "Right"
            }
          ]
        },
        {
          "type": "header",
          "content": "Heading"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading text"
        },
		{
          "type": "checkbox",
          "id": "heading_bold",
          "label": "Bold text"
        },
		{
          "type": "color",
          "id": "heading_color",
          "label": "Text color",
          "default": "#ffffff"
        },
		{
          "type": "text",
          "id": "heading_size",
          "label": "Text size",
          "default": "48px",
          "info": "Use px (eg: 30px)"
        },
		{
          "type": "select",
          "id": "heading_animation",
          "label": "Heading Animation",
          "default": "fadeIn",
          "options": [
            {
              "value": "fadeIn",
              "label": "Fade In"
            },
            {
              "value": "moveFromLeft",
              "label": "Move From Left"
            },
            {
              "value": "moveFromRight",
              "label": "Move From Right"
            },
            {
              "value": "moveFromTop",
              "label": "Move From Top"
            },
            {
              "value": "moveFromBottom",
              "label": "Move From Bottom"
            }
          ]
        },
		{
          "type": "select",
          "id": "heading_animation_delay",
          "label": "Start the animation after",
          "default": "1s",
          "options": [
            {
              "value": "1s",
              "label": "1 Second"
            },
            {
              "value": "2s",
              "label": "2 seconds"
            },
            {
              "value": "3s",
              "label": "3 seconds"
            },
            {
              "value": "4s",
              "label": "4 seconds"
            }
          ]
        },
        {
          "type": "header",
          "content": "Subheading"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Text"
        },
		{
          "type": "checkbox",
          "id": "subheading_bold",
          "label": "Bold text"
        },
		{
          "type": "color",
          "id": "subheading_color",
          "label": "Text Color",
          "default": "#ffffff"
        },
		{
          "type": "text",
          "id": "subheading_size",
          "label": "Text size",
          "default": "48px",
          "info": "Use px (eg: 30px)"
        },
		{
          "type": "select",
          "id": "subheading_animation",
          "label": "Subheading Animation",
          "default": "fadeIn",
          "options": [
            {
              "value": "fadeIn",
              "label": "Fade In"
            },
            {
              "value": "moveFromLeft",
              "label": "Move From Left"
            },
            {
              "value": "moveFromRight",
              "label": "Move From Right"
            },
            {
              "value": "moveFromTop",
              "label": "Move From Top"
            },
            {
              "value": "moveFromBottom",
              "label": "Move From Bottom"
            }
          ]
        },
		{
          "type": "select",
          "id": "subheading_animation_delay",
          "label": "Start the animation after",
          "default": "1s",
          "options": [
            {
              "value": "1s",
              "label": "1 Second"
            },
            {
              "value": "2s",
              "label": "2 seconds"
            },
            {
              "value": "3s",
              "label": "3 seconds"
            },
            {
              "value": "4s",
              "label": "4 seconds"
            }
          ]
        },
        {
          "type": "header",
          "content": "Subheading 2"
        },
        {
          "type": "textarea",
          "id": "caption",
          "label": "Subheading 2 text"
        },
		{
          "type": "checkbox",
          "id": "caption_bold",
          "label": "Bold text"
        },
		{
          "type": "color",
          "id": "caption_color",
          "label": "Text color",
          "default": "#ffffff"
        },
		{
          "type": "text",
          "id": "caption_size",
          "label": "Text size",
          "default": "48px",
          "info": "Use px (eg: 30px)"
        },
		{
          "type": "select",
          "id": "caption_animation",
          "label": "Subheading 2 Animation",
          "default": "fadeIn",
          "options": [
            {
              "value": "fadeIn",
              "label": "Fade In"
            },
            {
              "value": "moveFromLeft",
              "label": "Move From Left"
            },
            {
              "value": "moveFromRight",
              "label": "Move From Right"
            },
            {
              "value": "moveFromTop",
              "label": "Move From Top"
            },
            {
              "value": "moveFromBottom",
              "label": "Move From Bottom"
            }
          ]
        },
		{
          "type": "select",
          "id": "caption_animation_delay",
          "label": "Start the animation after",
          "default": "1s",
          "options": [
            {
              "value": "1s",
              "label": "1 Second"
            },
            {
              "value": "2s",
              "label": "2 seconds"
            },
            {
              "value": "3s",
              "label": "3 seconds"
            },
            {
              "value": "4s",
              "label": "4 seconds"
            }
          ]
        },




        {
          "type": "header",
          "content": "Subheading 3"
        },
        {
          "type": "textarea",
          "id": "caption_2",
          "label": "Subheading 3 text"
        },
    {
          "type": "checkbox",
          "id": "caption_bold_2",
          "label": "Bold text"
        },
    {
          "type": "color",
          "id": "caption_color_2",
          "label": "Text color",
          "default": "#ffffff"
        },
    {
          "type": "text",
          "id": "caption_size_2",
          "label": "Text size",
          "default": "48px",
          "info": "Use px (eg: 30px)"
        },
    {
          "type": "select",
          "id": "caption_animation_2",
          "label": "Subheading 3 Animation",
          "default": "fadeIn",
          "options": [
            {
              "value": "fadeIn",
              "label": "Fade In"
            },
            {
              "value": "moveFromLeft",
              "label": "Move From Left"
            },
            {
              "value": "moveFromRight",
              "label": "Move From Right"
            },
            {
              "value": "moveFromTop",
              "label": "Move From Top"
            },
            {
              "value": "moveFromBottom",
              "label": "Move From Bottom"
            }
          ]
        },
    {
          "type": "select",
          "id": "caption_animation_delay_2",
          "label": "Start the animation after",
          "default": "1s",
          "options": [
            {
              "value": "1s",
              "label": "1 Second"
            },
            {
              "value": "2s",
              "label": "2 seconds"
            },
            {
              "value": "3s",
              "label": "3 seconds"
            },
            {
              "value": "4s",
              "label": "4 seconds"
            }
          ]
        },









        {
          "type": "header",
          "content": "Button"
        },
		{
          "type": "text",
          "id": "button_text",
          "label": "Button Label"
        },		
		{
          "type": "select",
          "id": "button_animation",
          "label": "Button Animation",
          "default": "fadeIn",
          "options": [
            {
              "value": "fadeIn",
              "label": "Fade In"
            },
            {
              "value": "moveFromLeft",
              "label": "Move From Left"
            },
            {
              "value": "moveFromRight",
              "label": "Move From Right"
            },
            {
              "value": "moveFromTop",
              "label": "Move From Top"
            },
            {
              "value": "moveFromBottom",
              "label": "Move From Bottom"
            }
          ]
        },
		{
          "type": "select",
          "id": "button_animation_delay",
          "label": "Start the animation after",
          "default": "1s",
          "options": [
            {
              "value": "1s",
              "label": "1 Second"
            },
            {
              "value": "2s",
              "label": "2 seconds"
            },
            {
              "value": "3s",
              "label": "3 seconds"
            },
            {
              "value": "4s",
              "label": "4 seconds"
            }
          ]
        }
      ]
    }
  ],
  "presets": [{
    "name": "Slideshow",
    "category": "Slideshow",
    "settings": {
      "autoplay": true,
      "autoplay_speed": "5000"
    },
    "blocks": [
      { "type": "image" },
      { "type": "image" }
    ]
  }]
}
{% endschema %}
