/* Slideshow V1 */

<div data-section-id="{{ section.id }}" data-section-type="section-slideshow-v1" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %} {% if section.settings.sections_layout == "dark" %}background: {{section.settings.sections_bg_color}};{% endif %}">
  <div class="section-slideshow-v1 ">
      <div class="slick-side-h1">       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        <div class="itemv-slide-h1">
          <div class=" {% if section.settings.select_effect == 'no_effect' %} info-sideh1-no-effect {% elsif section.settings.select_effect == 'Effect_1' %} info-sideh1 {% elsif section.settings.select_effect == 'Effect_2'  %} info-sideh1 effect2  {% endif %}">
            <div class="picture-slideshow">
              {% if block.settings.block_banerimage != blank %}
              <a href="{{block.setting.block_url}}">
              <img class="w-100" src="{{block.settings.block_banerimage | img_url: 'master'}}" class="img-responsive img_slideh1" alt="">
              </a>
              {% else %}
              <a href="">
              <img class="w-100" src="//placehold.it/1920x980" class="img-responsive img_slideh1" alt="slideshow">
              </a>
              {% endif %}
            </div>
         
            <div class="{% if block.settings.select_position_content == 'left' %} box-content  {% elsif block.settings.select_position_content == 'center' %} box-content-center  {% elsif block.settings.select_position_content == 'right' %} box-content-right {% endif %} " >
              {% if block.settings.block_title_top and block.settings.block_title_top2 and block.settings.block_buton != blank %}
              <div class="box-info box-info-{{block.id}}">
                <div class="box-title">
                  {% if block.settings.block_title_top != blank %}
                  <h3 class="titlebig mb-0" style="color:{{block.settings.color_block_title_top}};">{{ block.settings.block_title_top }}</h3>
                  {% endif %} 
                </div>
                <div class="box-title2">
                  {% if block.settings.block_title_top2 != blank %}
                  <h3 class="title-small mb-0" style="color:{{block.settings.color_block_title_top2}};">{{ block.settings.block_title_top2 }}</h3>
                  {% endif %}
                </div>
                  {% if block.settings.block_buton != blank %}
                  <a class="mt-4 button-main2 button-shop-{{block.id}} " href="{{block.settings.block_url}}" style="color:{{block.settings.color_block_button}}; border-color : {{block.settings.color_block_button}} ">
                   {{ block.settings.block_buton }}
                  </a>

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

<script>
  jQuery(document).ready(function($) {
  
    $('.slick-side-h1').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3500,
      dots: false,
      arrows: true,
      {% if section.settings.select_effect == 'Effect_1' or section.settings.select_effect == 'Effect_2'%}
      fade : true,
      {% endif %}
      prevArrow:'<button type="button" class="prev-slide"><i class="fa fa-long-arrow-left"></i> </button>',
      nextArrow:'<button type="button" class="next-slide"><i class="fa fa-long-arrow-right"></i></button>', 
      responsive: [

        {
          breakpoint: 1200,
          settings: {
            infinite: true,
            dots: true ,
            arrows: false
          }
        },
        {
          breakpoint: 1024,
          settings: {
            dots: true ,
            arrows: false
          }
        },
        {
          breakpoint:600,
          settings: {
            dots: true ,
            arrows: false,
            autoplay: true,
          }
        }
      ]
    });
    })
</script>

<style>
  {% if section.blocks.size > 0 %}
  {% for block in section.blocks %}
  {% if block.type == "slideshow" %}
  .button-shop-{{block.id}}:hover {
    color : {{block.settings.color_hover_button}} !important;
  }
  .section-slideshow-v1 .info-sideh1 .box-content .button-shop-{{block.id}}:before{
  	background-color:{{block.settings.bgcolor_hover_button}} !important;
  }
  {% endif %}
  {% endfor %}
  {% endif %}
</style>

{% schema %}
{
  "name": "Slideshow v1",
  "class": "index-section",
  "settings": [
	
	{
      "type": "select",
      "id": "select_effect",
      "label": "Effect Slide",
      "options": [
        {
          "value": "no_effect",
          "label": "No Effect"
        },
        {
          "value": "Effect_1",
          "label": "Effect #1"
        },
		{
          "value": "Effect_2",
          "label": "Effect #2"
        }
      ],
      "default": "no_effect"
    },
	


    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    }
  ],
  "blocks": [
    {
      "type": "slideshow",
      "name": "slideshow",
      "settings": [
        {
        "type": "header",
        "content": "Image Slide"
        },
		{
          "type": "image_picker",
          "id": "block_banerimage",
          "label": "Image slideshow",
          "info": "1920 x 980px recommended"
        },
		{
        "type": "header",
        "content": "Position Content"
        },
		{
          "type": "select",
          "id": "select_position_content",
          "label": "Choose the position content",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
    	},

        {
          "type": "text",
          "id": "block_title_top",
          "label": "Title sideshow top",
          "default": "Basic Collection"
        },
		{		
           "type": "color",
           "id": "color_block_title_top",
           "label": "Color Title sideshow top 1",
           "default": "#010101"
        },
		{
          "type": "text",
          "id": "block_title_top2",
          "label": "Title sideshow top 2",
          "default": "Style Destination"
        },
		{		
           "type": "color",
           "id": "color_block_title_top2",
           "label": "Color Title sideshow top 2",
           "default": "#E5E5E5"
        },
        {
          "type": "text",
          "id": "block_buton",
          "label": "Button slideshow",
          "default": "Shop now"
        },
		{
           "type": "color",
           "id": "color_block_button",
           "label": "Color button",
           "default": "#fff"
        },
		{
           "type": "color",
           "id": "color_hover_button",
           "label": "Color hover button",
           "default": "#fff"
        },
		{
           "type": "color",
           "id": "bgcolor_hover_button",
           "label": "Background Color hover button",
           "default": "#000"
        },


        {
          "type": "url",
          "id": "block_url",
          "label": "URL slideshow",
          "default": "/collections/all"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Slideshow v1",
      "category": "Slideshow",
	  "blocks": [
        {
          "type": "slideshow",
          "settings": {
            "block_title_top": "Basic Collection",
			"block_title_top2": "Style Destination",
			"block_buton": "Shop now"
          }
        },
		 {
          "type": "slideshow",
          "settings": {
            "block_title_top": "Spring Collection",
			"block_title_top2": "Hanpicked By Eveland",
			"block_buton": "Shop now"
          }
        },
		 {
          "type": "slideshow",
          "settings": {
            "block_title_top": "Kids Collection",
			"block_title_top2": "Everything For Chirdren",
			"block_buton": "Shop now"
          }
        }		
      ]
    }
  ]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}