<div id="home-slider " class="{% if section.settings.is_effect_apply%}no_animation_effect{% else %}animation_effect{% endif %} index-section home-section home-section-{{ section.id }} space_top_header" data-section-id="{{ section.id }}" data-section-type="home-slider ">
    <div data-animation_name="{{ section.settings.animation_name }}" data-animation_delay="{{ section.settings.animation_delay }}" class="{% if section.settings.animation_name != 'noeffect' %}scroll_animation {% endif %}shopify-section-new" style="animation-duration: {{ section.settings.animation_duration }};">	  
	  
      {% if section.settings.slider_image == blank %}
      	{%assign slider_image = 'image-slider-parallax.jpg' | asset_url %}
      	{%assign slider_image_new = 'image-slider-parallax.jpg' | asset_url %}
      {%else%}
      	{% if settings.image_loading_type == 'lazy' %}
          	{%assign slider_image = section.settings.slider_image | img_url: "100x" %}
  			{%assign slider_image_new = section.settings.slider_image | img_url: "2000x" %}
          {% else %}
        	{%assign slider_image = section.settings.slider_image | img_url: "2000x" %}
  			{%assign slider_image_new = section.settings.slider_image | img_url: "2000x" %}
          {% endif %}
      	
      {% endif %}
      
      {% if section.settings.image_height == blank %}
        {%assign slider_height = "308px" %}
      {%else%}
      	{%assign slider_height = section.settings.image_height %}
      {% endif %}
	
      <div class="homepage-image preventOverflow {% if settings.image_loading_type == 'lazy' %}lazyloadimagebg blur-up{% endif %} hidewhennoheight1{% if section.settings.mobile_image_big == true %} hidewhennoheight_mob1{% endif %}" data-bg="{{ slider_image_new }}"  style="height: 308px; min-height: {{ slider_height }}; background-image: url('{{ slider_image }}');">
          {% if section.settings.sliderlink != blank %}
        	<a href="{{ section.settings.sliderlink }}" class="homepagelink scroll_link_trigger"></a>
          {% endif %}
        	
        	
        
          <div class="content--centered2">
             {% if section.settings.sliderlink != blank %}
        	<a href="{{ section.settings.sliderlink }}" class="homepagelink scroll_link_trigger"></a>
          {% endif %}
              <div class="text-center preventOverflowContent">
                {% assign hex2rgb_r = '' %}
                {% assign hex2rgb_g = '' %}
                {% assign hex2rgb_b = '' %}	
                {% if section.settings.title_bg_color != 'rgba(0,0,0,0)' and section.settings.title_bg_color != '' %}
               
					{% assign hex2rgb_hex = section.settings.title_bg_color %}
         			 {% include 'hex2rgb' %}
                {% endif %}
                  <h{{section.settings.heading_tag}} class="title_homepage-image" style="font-weight:{{ section.settings.heading_tag_text_style}};color:{{ section.settings.title_color }};background: rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }}, {{ section.settings.title_bg_opacity }});">{{ section.settings.slider_title }}</h{{section.settings.heading_tag}}>
                {% assign hex2rgb_r = '' %}
                {% assign hex2rgb_g = '' %}
                {% assign hex2rgb_b = '' %}	
                {% if section.settings.slogan_bg_color != 'rgba(0,0,0,0)' and section.settings.slogan_bg_color != '' %}
                	{% assign hex2rgb_hex = section.settings.slogan_bg_color %}
         			
                	{% include 'hex2rgb' %}
                {% endif %}
                <br>
                <p style="color:{{ section.settings.slogan_color }};background: rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }}, {{ section.settings.slogan_bg_opacity }});" class="homepage-image-txt-small">{{ section.settings.slider_slogan }}</p>
               	<br>
                {% if section.settings.slider_button != blank and section.settings.link_button != blank %}
                  <a class="button scroll_link_trigger" href="{{ section.settings.link_button }}">{{ section.settings.slider_button }}</a>
                {% endif %}
                {% if section.settings.slider_button_2 != blank and section.settings.link_button_2 != blank %}
                  <a class="button scroll_link_trigger" href="{{ section.settings.link_button_2 }}">{{ section.settings.slider_button_2 }}</a>
                {% endif %}
              </div>
          </div>

          <div class="scroll_icon_wrap">
            {% if section.settings.link_arrow != blank %}
              <a href="{{ section.settings.link_arrow }}" class="scroll_link scroll_link_trigger bloop text-center">
                  <span class="scroll_icon">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="28px" viewBox="0 0 52 28" enable-background="new 0 0 52 28" xml:space="preserve">

                          <polyline fill="none" stroke="{{section.settings.link_arrow_color}}" stroke-width="4" stroke-miterlimit="10" points="50.038,2.546 25.928,24.541 1.816,2.546"/>
                      </svg>
                  </span>
              </a>
            {% endif %}
          </div>

      </div>
    
  </div>
</div>

{% if section.settings.mobile_image_big == true %}
	
<script>
  	$(window).bind("load resize scroll touchmove",function(e){
      if (window.innerWidth < 740) {
        
		var $t = $('.home-section-{{ section.id }} .shopify-section-new');
                 
        var topPos = $t.offset().top;
        var winHeight = $(window).height();
        var heightToUpdate = $(window).height() - topPos;
         {% if settings.footer_band_enable %}
              heightToUpdate = heightToUpdate - 15;
        {% else %}
              heightToUpdate = heightToUpdate;
        {% endif %}
        if(heightToUpdate > 200){
        	$t.find('.preventOverflow').css('height',heightToUpdate+'px');	
        }
        $t.find('.preventOverflow').removeClass('hidewhennoheight_mob');
        
      }
    });
</script>

{% endif %}
			


{% schema %}
  {
  	"name": "Image Slider Parallax",
  	"settings": [
		{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Image Slider Parallax by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/image-slider-parallax)"
        },
  		{
  			"type": "image_picker",
  			"id": "slider_image",
  			"label": "Insert here your image",
  			"info": "Minimun: 1280px X 797px - Maximum : 2000px X 1245px"
  		},

  		{
  			"type": "text",
  			"id": "slider_title",
  			"label": "Title"
  		},

		
		{
  			"type": "color",
  			"id": "title_color",
  			"label": "Title Color"
  		},

		{
  			"type": "color",
  			"id": "title_bg_color",
  			"label": "Background Color Title"
  		},
		{
  			"type": "select",
  			"id": "title_bg_opacity",
  			"label": "Opacity Background Color Title",
			"options": [
            {
              "value": "0",
              "label": "Transparent"
            },
            {
              "value": ".1",
              "label": "10%"
            },
            {
              "value": ".2",
              "label": "20%"
            },
            {
              "value": ".3",
              "label": "30%"
            },
            {
              "value": ".4",
              "label": "40%"
            },
            {
              "value": ".5",
              "label": "50%"
            },
            {
              "value": ".6",
              "label": "60%"
            },
            {
              "value": ".7",
              "label": "70%"
            },

            {
              "value": ".8",
              "label": "80%"
            },
            {
              "value": ".9",
              "label": "90%"
            },
            {
              "value": "1",
              "label": "100%"
            }
          ]
  		},

		{
          "type": "select",
          "id": "heading_tag",
          "label": "Heading Tag",
          "default":"1",
          "options": [
            {
            	"value": "1",
            	"label": "H1"
            },
            {
            	"value": "2",
            	"label": "H2"
            },
            {
            	"value": "3",
            	"label": "H3"
            },
            {
            	"value": "4",
            	"label": "H4"
            },
            {
            	"value": "5",
            	"label": "H5"
            },
            {
            	"value": "6",
            	"label": "H6"
            }
          ]
        },
		{
              "type": "select",
              "id": "heading_tag_text_style",
              "label": "Heading Font Style",
              "options": [
                {
                  "value": "300",
                  "label": "Lighter",
                  "group": "Font Style"
                },
                {
                  "value": "400",
                  "label": "Normal",
                  "group": "Font Style"
                },
                {
                  "value": "600",
                  "label": "Bold",
                  "group": "Font Style"
                },
                {
                  "value": "700",
                  "label": "Bolder",
                  "group": "Font Style"
                }
              ],
              "default": "600"
            },		

		
		{
  			"type": "text",
  			"id": "slider_slogan",
  			"label": "Slogan"
  		},
		{
  			"type": "color",
  			"id": "slogan_color",
  			"label": "Slogan Color"
  		},
		
		{
  			"type": "color",
  			"id": "slogan_bg_color",
  			"label": "Background Color Slogan"
  		},
		{
  			"type": "select",
  			"id": "slogan_bg_opacity",
  			"label": "Opacity Background Color Slogan",
			"options": [
            {
              "value": "0",
              "label": "Transparent"
            },
            {
              "value": ".1",
              "label": "10%"
            },
            {
              "value": ".2",
              "label": "20%"
            },
            {
              "value": ".3",
              "label": "30%"
            },
            {
              "value": ".4",
              "label": "40%"
            },
            {
              "value": ".5",
              "label": "50%"
            },
            {
              "value": ".6",
              "label": "60%"
            },
            {
              "value": ".7",
              "label": "70%"
            },

            {
              "value": ".8",
              "label": "80%"
            },
            {
              "value": ".9",
              "label": "90%"
            },
            {
              "value": "1",
              "label": "100%"
            }
          ]
  		},

		{
  			"type": "text",
  			"id": "slider_button",
  			"label": "Button 1"
  		},
		{
  			"type": "text",
  			"id": "link_button",
  			"label": "Link Button 1"
  		},
		{
  			"type": "text",
  			"id": "slider_button_2",
  			"label": "Button 2"
  		},
		{
  			"type": "text",
  			"id": "link_button_2",
  			"label": "Link Button 2"
  		},
		{
  			"type": "text",
  			"id": "link_arrow",
  			"label": "Link Arrow"
  		},
		{
  			"type": "color",
  			"id": "link_arrow_color",
  			"label": "Link Arrow Color",
			"default":"#2e3438"
  		},
		{
  			"type": "text",
  			"id": "sliderlink",
  			"label": "Link Image"
  		},
        
		{
              "type":"checkbox",
              "id":"mobile_image_big",
              "label":"Mobile Full Height",
			  "default":false
		},
		
		
		
		{
  			"type": "text",
  			"id": "image_height",
  			"label": "Height",
			"placeholder":"300px",
  			"info": "Not for top of page"
  		},
        {
            "type":"checkbox",
            "id":"is_effect_apply",
            "label":"Apply Section Effect",
            "default":false
        },
        {
            "type": "select",
            "id": "animation_name",
            "label": "Animation Effect",
            "default": "noeffect",
            "options": [
              {
                "label": "No Effect",
                "value": "noeffect"
              },
              {
                "label": "bounce",
                "value": "bounce"
              },
              {
                "label": "flash",
                "value": "flash"
              },
              {
                "label": "pulse",
                "value": "pulse"
              },
              {
                "label": "rubberBand",
                "value": "rubberBand"
              },
              {
                "label": "shake",
                "value": "shake"
              },
              {
                "label": "headShake",
                "value": "headShake"
              },
              {
                "label": "swing",
                "value": "swing"
              },
              {
                "label": "tada",
                "value": "tada"
              },
              {
                "label": "wobble",
                "value": "wobble"
              },
              {
                "label": "jello",
                "value": "jello"
              },
              {
                "label": "bounceIn",
                "value": "bounceIn"
              },
              {
                "label": "bounceInDown",
                "value": "bounceInDown"
              },
              {
                "label": "bounceInLeft",
                "value": "bounceInLeft"
              },
              {
                "label": "bounceInRight",
                "value": "bounceInRight"
              },
              {
                "label": "bounceInUp",
                "value": "bounceInUp"
              },
              {
                "label": "fadeIn",
                "value": "fadeIn"
              },
              {
                "label": "fadeInDown",
                "value": "fadeInDown"
              },
              {
                "label": "fadeInDownBig",
                "value": "fadeInDownBig"
              },
              {
                "label": "fadeInLeft",
                "value": "fadeInLeft"
              },
              {
                "label": "fadeInLeftBig",
                "value": "fadeInLeftBig"
              },
              {
                "label": "fadeInRight",
                "value": "fadeInRight"
              },
              {
                "label": "fadeInRightBig",
                "value": "fadeInRightBig"
              },
              {
                "label": "fadeInUp",
                "value": "fadeInUp"
              },
              {
                "label": "fadeInUpBig",
                "value": "fadeInUpBig"
              },
              {
                "label": "flipInX",
                "value": "flipInX"
              },
              {
                "label": "flipInY",
                "value": "flipInY"
              },
              {
                "label": "lightSpeedIn",
                "value": "lightSpeedIn"
              },
              {
                "label": "rotateIn",
                "value": "rotateIn"
              },
              {
                "label": "rotateInDownLeft",
                "value": "rotateInDownLeft"
              },
              {
                "label": "rotateInDownRight",
                "value": "rotateInDownRight"
              },
              {
                "label": "rotateInUpLeft",
                "value": "rotateInUpLeft"
              },
              {
                "label": "rotateInUpRight",
                "value": "rotateInUpRight"
              },
              {
                "label": "hinge",
                "value": "hinge"
              },
              {
                "label": "jackInTheBox",
                "value": "jackInTheBox"
              },
              {
                "label": "rollIn",
                "value": "rollIn"
              },
              {
                "label": "zoomIn",
                "value": "zoomIn"
              },
              {
                "label": "zoomInDown",
                "value": "zoomInDown"
              },
              {
                "label": "zoomInLeft",
                "value": "zoomInLeft"
              },
              {
                "label": "zoomInRight",
                "value": "zoomInRight"
              },
              {
                "label": "zoomInUp",
                "value": "zoomInUp"
              },
              {
                "label": "slideInDown",
                "value": "slideInDown"
              },
              {
                "label": "slideInLeft",
                "value": "slideInLeft"
              },
              {
                "label": "slideInRight",
                "value": "slideInRight"
              },
              {
                "label": "slideInUp",
                "value": "slideInUp"
              },
              {
                "label": "heartBeat",
                "value": "heartBeat"
              }
            ]
          },
          {
            "type": "select",
            "id": "animation_duration",
            "label": "Animation Duration",
            "options": [
              {
                "value": "1s",
                "label": "1s"
              },
              {
                "value": "2s",
                "label": "2s"
              },
              {
                "value": "3s",
                "label": "3s"
              }
            ],
            "default": "1s"
          },
          {
            "type": "select",
            "id": "animation_delay",
            "label": "Animation Delay",
            "options": [
              {
                "value": "0",
                "label": "0"
              },
              {
                "value": "1",
                "label": "1s"
              },
              {
                "value": "2",
                "label": "2s"
              },
              {
                "value": "3",
                "label": "3s"
              },
              {
                "value": "4",
                "label": "4s"
              },
              {
                "value": "5",
                "label": "5s"
              },
              {
                "value": "6",
                "label": "6s"
              },
              {
                "value": "7",
                "label": "7s"
              },
              {
                "value": "8",
                "label": "8s"
              }
            ],
            "default": "0"
        }
  		
  	],
	"presets": [
      {
        "name": "Image Slider Parallax",
        "category": "Image"
      }
    ]
  }
{% endschema %}
