rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/home-image-gallery.liquid

@@ -0,0 +1,1087 @@
+{% assign margin = section.settings.margin | split: ',' %}
+{% assign margin_top = margin[0] %}
+{% assign margin_bottom = margin[1] %} 
+{% assign padding = section.settings.padding | split: ',' %}
+{% assign padding_top = padding[0] %}
+{% assign padding_bottom = padding[1] %} 
+
+{% if section.settings.enable_overlay %}
+{% assign section_overlay = 'dt-sc-overlay' %}
+{% endif %}
+
+{% case section.settings.grid %}
+{% when '1' %}
+{%- assign column = 'one-column' -%}
+{% when '2' %}
+{%- assign column = 'two-column' -%}
+{% when '3' %}
+{%- assign column = 'three-column' -%}              
+{% when '4' %}
+{%- assign column = 'four-column' -%}              
+{% when '5' %}
+{%- assign column = 'five-column' -%}   
+{% when '6' %}
+{%- assign column = 'six-column' -%}   
+{% else %}
+{%- assign column = 'five-column' -%}              
+{% endcase %} 
+{% if section.settings.show_background_image %}
+{% assign lazyScript = "lazyload" %}
+{% endif %}
+{% if section.settings.enable_slider %}
+<div data-section-id="{{ section.id }}" data-section-type="home-image-gallery" 
+     data-item-per-view="{{section.settings.items_per_view}}"
+     data-laptop-screen-items="{{section.settings.items_laptop_view}}"
+     data-tablet-screen-items  ="{{section.settings.items_tablet_view}}"
+     data-small-screen-items="{{section.settings.items_mobile_view}}"  data-autoplay="{{section.settings.slider_autoplay}}"  data-blocks-limit="{{section.blocks.size}}" data-item-space="{{section.settings.column_gap}}" data-auto-height="{{section.settings.enable_auto_height}}">
+  {% endif %}
+  <div class="dt-sc-section-wrapper  {{lazyScript}} {{ section_overlay }} {% if section.settings.background_style == 'parallax' %} parallax-initiated{% endif %}" {% if section.settings.background_style == 'parallax' %} data-speed="2" data-style="parallax"{% endif %} style="{% render 'bg-color-image-padding' %} background-size: {{- section.settings.background_size -}}; {% if section.settings.background_style == 'fixed' %}background-attachment: fixed;{% endif %} background-repeat:{% if section.settings.background_size == 'repeat' %}repeat{% else %}no-repeat;{% endif %}" {% include 'bg_image' %}>  
+    <div class="{% render 'container-settings' %}"> 
+      <div class="row {{ section.settings.custom_class_name }} list-image"> 
+        {% render 'section-heading', class: section.id %} 
+        <div class="image-bar__section">
+          {%- if section.blocks.size > 0 -%}          
+          {% if section.settings.enable_slider %}  <div class="dt-sc-swiper-slider swiper-container {% if section.settings.dots %} {{ section.settings.carousel_pagination_alignment }} {% endif %} {% if section.settings.arrows %}  {{ section.settings.nav_arrow_position }} {{ section.settings.center_nav_arrow_alignment }} {% endif %}"> {% endif %}
+          {% if section.settings.enable_slider %}  <div id="swiper-{{section.id}}-slider" class="{{section.settings.block_style}}">    {% endif %}
+          <ul class="image-bar__section-inner {% if section.settings.enable_slider %}swiper-wrapper{% endif %}  {% unless section.settings.enable_slider %} dt-sc-column {{column}} {% endunless %}">
+            {%- for block in section.blocks -%}
+            <li class="image-bar__item {% if section.settings.enable_slider %}swiper-slide{% endif %}   {{block.type}}-{{block.id}}" {{ block.shopify_attributes }}  >
+              {%- if block.settings.link != blank -%}
+              <a href="{{ block.settings.link }}">
+                {%- endif -%}
+                {%- if block.settings.image != blank -%}              
+                {%- assign img_url = block.settings.image | img_url: 'master' | replace: '_1x1.', '_{width}x.' -%}
+                <img class="lazyload"
+                     src="{{ 'loading.gif' | asset_url }}"
+                     data-src="{{ img_url }}"
+                     data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
+                     data-aspectratio="{{ block.settings.image.aspect_ratio }}"
+                     data-sizes="auto"            
+                     alt="{{ block.settings.image.alt}}">            
+                <noscript>
+                  {{ block.settings.image | img_url: '480x480', scale: 2 | img_tag: block.settings.image.alt, 'dt-sc-noscript-image' }}
+                </noscript>              
+                {%- else -%}
+                {{ 'image' | placeholder_svg_tag }}
+                {%- endif -%}
+                <div class="image-gallery-overlay">
+                  
+                 
+                  
+                  {%- if block.settings.overlay_title != blank -%}
+                  <h6 class="image-overlay-title">{{block.settings.overlay_title}}</h6>
+                  {%- endif -%}
+                   {%- if block.settings.icon_class != blank and block.settings.icon_link != blank -%}
+                  <a href="{{block.settings.icon_link}}" class="link"><i class="{{block.settings.icon_class}}"></i></a>
+                  {%- endif -%}
+                </div>
+                {%- if block.settings.link != blank -%}
+              </a>
+              {%- endif -%}
+            </li>
+            {%- endfor -%}
+          </ul>
+          {% if section.settings.enable_slider %} </div>{% endif %}
+          {% if section.settings.enable_slider %}
+          {% if section.settings.arrows %}                    
+          <div class="swiper-{{ section.id}}-arrows swiper-arrows">
+            <div id="swiper-{{ section.id}}-next" class="swiper-button-next dt-sc-btn"></div>
+            <div id="swiper-{{ section.id}}-prev" class="swiper-button-prev dt-sc-btn"></div>
+          </div>  
+          {% endif  %} 
+          {% if section.settings.dots %}
+          <div id="swiper-{{ section.id}}-pagination" class="swiper-pagination"></div>
+          {% endif %}
+          {% endif  %}  
+          {% if section.settings.enable_slider %} </div>{% endif %}
+          {%- endif -%}
+          {% if section.settings.image_list_text != blank and section.settings.image_list_link != blank %}
+          <a href="{{section.settings.image_list_link}}" class="dt-sc-image-list-btn">{{section.settings.image_list_text}}<i class=" fa fa-chevron-circle-right"> </i></a>
+          {% endif %}
+        </div>
+      </div>
+
+    </div>
+  </div>
+  {% if section.settings.enable_slider %}
+</div>
+{% endif %}
+
+<style>
+  #shopify-section-{{section.id}}.home-image-gallery .dt-sc-heading .dt-sc-main-heading { color: var(--DTColor_Heading); color:{{ section.settings.section_heading_color }}; } 
+  #shopify-section-{{section.id}}.home-image-gallery .dt-sc-heading .dt-sc-sub-heading { color: var(--DTColor_Heading); color:{{ section.settings.section_sub_heading_color }}; } 
+  #shopify-section-{{section.id}}.home-image-gallery .dt-sc-heading .dt-sc-heading-description { color: var(--DTColor_Body); color:{{ section.settings.section_description_color }}; } 
+  #shopify-section-{{section.id}}.home-image-gallery .dt-sc-heading .dt-sc-btn { 
+    background: var(--DT_Button_BG_Color); background:{{ section.settings.section_button_bg_color }}; 
+      color: var(--DT_Button_Text_Color); color:{{ section.settings.section_button_text_color }}; 
+        }
+  #shopify-section-{{section.id}}.home-image-gallery .dt-sc-heading .dt-sc-btn:hover { 
+    background: var(--DT_Button_BG_Hover_Color); background:{{ section.settings.section_button_hover_bg_color }}; 
+      color: var(--DT_Button_Text_Hover_Color); color:{{ section.settings.section_button_hover_text_color }}; 
+        }
+
+  #shopify-section-{{section.id}}.home-image-gallery .dt-sc-overlay:before  { 
+    color: var(--DTTertiaryColor); 
+      color: {{ section.settings.background_color }};    
+      background: currentcolor; 
+      opacity: {{ section.settings.overlay_transparency }}; 
+      }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    height: {{section.settings.item_height}}px;
+    position: relative;
+    overflow:hidden;
+  }
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay {
+  	position: absolute; height: 100%; width: 100%; display: grid; align-content: center; justify-content: center; top: 0; left: 0;
+     flex-direction: column; gap: 15px;opacity: 0;  background: {{ section.settings.image_overlay_color  | color_modify: 'alpha', 0.5 }}; transition:var(--DTBaseTransition);
+   
+  }
+  
+
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:hover .image-gallery-overlay {
+    opacity: 1; 
+  }
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay > * {
+    color: var(--DT_Button_Text_Color); color: {{ section.settings.image_overlay_icon_color }};
+      font-size: var(--DTFontSizeBase); font-size: {{ section.settings.icon_size }}px;
+  }
+   
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay > * { margin: 0; }
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title { position: relative; }
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title:before,
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title:after {
+    content: ''; position: absolute; left: 0; bottom: 0; background-color: currentcolor; height: 2px;
+  }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title:before {
+    width: 0; transition: width ease 0.4s; -webkit-transition: width ease 0.4s;
+  }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title:after {
+    width: 100%; transition: all ease 0.6s; -webkit-transition: all ease 0.6s;
+  }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title:hover::before {
+    width: 100%;
+  }
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title:hover::after {
+    left: 100%; width: 0; transition: all ease 0.2s; -webkit-transition: all ease 0.2s;
+  }
+
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item a,
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item img { height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item svg {
+    min-width: 150px;
+    height: auto;
+  }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: relative;
+  }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .image-bar__section-inner { margin: 0; }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .dt-sc-image-list-btn { position: absolute; padding: 10px 25px; border-radius: var(--DTRadius); bottom:-70px;
+    z-index: 1;
+    }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .dt-sc-image-list-btn { 
+    background: var(--DT_Button_BG_Color); background-color: {{ section.settings.image_link_bg_color }};
+      color: var(--DT_Button_Text_Color); color: {{ section.settings.image_link_text_color }}; }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .dt-sc-image-list-btn:hover { background: var(--DT_Button_BG_Hover_Color);
+    background-color: {{ section.settings.image_link_hover_bg_color }};
+    color: var(--DT_Button_Text_Hover_Color); color: {{ section.settings.image_link_hover_text_color }}; }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section-inner { gap: var(--DTGutter_Width);  gap: {{ section.settings.column_gap}}px; }  
+
+
+  /*  Carousel Styles */
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container { width: 100%; }
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container [class*="swiper-container"] { margin: 0; padding: 0; }
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container [class*="swiper-container"] .image-bar__section-inner { gap: 0; }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container .swiper-arrows > .dt-sc-btn[class*="swiper-button-"] { 
+    background: var(--DT_Button_BG_Color);  
+      background: {{ section.settings.navigation_button_color }};  
+      }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container .swiper-arrows > .dt-sc-btn[class*="swiper-button-"]:after {   
+    color: var(--DT_Button_Text_Color);
+      color: {{ section.settings.navigation_button_icon_color }};
+      }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container .swiper-arrows > .dt-sc-btn:hover { 
+    background: var(--DT_Button_BG_Hover_Color); 
+      background: {{ section.settings.navigation_button_hover_color }}; 
+      }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container .swiper-arrows > .dt-sc-btn:hover[class*="swiper-button-"]:after { 
+    color: var(--DT_Button_Text_Hover_Color);
+      color: {{ section.settings.navigation_button_hover_icon_color }};
+      }
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container .swiper-pagination-bullet { 
+    background: var(--DTSecondaryColor);  
+      background: {{ section.settings.navigation_dot_color }};  
+      }  
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active { 
+    background: var(--DTPrimaryColor);  
+      background: {{ section.settings.navigation_dot_active_color }};  
+      }
+
+
+
+  @media (max-width:1540px) {
+
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__item { height: {{section.settings.item_height_laptop}}px; }
+
+  }
+
+  @media only screen and (min-width: 1200px) {
+    #shopify-section-{{section.id}}.home-image-gallery .dt-sc-section-wrapper { margin-top:{{margin_top}}px; margin-bottom:{{margin_bottom}}px;padding-top:{{padding_top}}px; padding-bottom:{{padding_bottom}}px; }
+  }
+
+  @media only screen and (max-width: 1199px) {
+    #shopify-section-{{section.id}}.home-image-gallery .dt-sc-section-wrapper { margin-top:{{margin_top | divided_by: 2 }}px; margin-bottom:{{margin_bottom | divided_by: 2}}px;padding-top:{{padding_top | divided_by: 2}}px; padding-bottom:{{padding_bottom | divided_by: 2}}px;}
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__item { height: {{section.settings.item_height_tab}}px; }
+  }
+
+  @media (max-width:767px) {
+
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .dt-sc-image-list-btn { position: static; margin-top: 30px; }
+
+
+    {% if section.settings.remove_button_space %}
+
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .dt-sc-image-list-btn { margin-top: 0; }
+
+    {% endif %}
+
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__item { height: {{section.settings.item_height_mobile}}px; }
+
+  }  
+
+  @media only screen and (min-width: 577px) and (max-width: 767px) {
+
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .image-bar__section-inner { grid-template-columns: repeat(2,1fr); }
+
+  }
+/*  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:before{
+   
+      
+     content:" ";
+      position:absolute;
+       background-image:url({{ section.settings.mask_image | img_url: 'master' }});
+      width:100%;
+      height:100%;
+      background-size:cover;
+      background-position:center;
+      background-repeat:no-repeat;
+      z-index:1;
+ } */
+  
+  
+   #shopify-section-{{section.id}}.home-image-gallery .image-bar__item{ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+   
+     width: 381px;
+     height: 330px;
+     display:inline-block;
+   
+   }
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(1){margin:auto; display:block; right:0; left:0;}
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .image-bar__section-inner{
+
+     float: left;
+      clear: both;
+      width: 100%;
+      margin: 0px auto;
+      padding: 0px;
+      position: relative;
+      display:block;
+  }
+ #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(2){
+    margin: -162px 0 0 104px;
+    float: left;
+   
+ }
+#shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(3){
+  
+  margin: -164px 0px 0px 201px;
+    float: left;
+}
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(4){
+  
+    margin: 174px 0px 0px -964px;
+    float: left;
+}
+  
+   #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(5){
+  
+    margin: -160px 0px 0px -90px;
+    float: left;
+}
+  
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(6){
+  
+    margin: 7px 0px 0px -89px;
+    float: left;
+}
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){
+  
+    margin: -160px 0px 0px 395px;
+    float: left;
+} 
+
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay a.link{
+    
+    padding: 10px;
+    background: #fff;
+    color: #000;
+    width: 50px;
+    height: 40px;
+    margin: auto;
+    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  }
+   #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay a.link:hover{ background: #ffb001;}
+     #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .dt-sc-image-list-btn i.fa{margin-left:10px;}
+
+/*responsible*/
+  @media screen and (max-width:1690px){
+  #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(2){margin: -162px 0 0 54px;}
+   #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){margin: -160px 0 0 345px;}
+  }
+/*   @media screen and (max-width:1230px){
+    
+     #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(2){margin: -164px 0 0 201px;}
+   #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){margin: -160px 0 0 335px;}
+  }*/
+  
+/*    @media screen and (max-width:1199px){
+    
+    #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(2){margin: -162px 0 0 43px;}
+   #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){margin: -160px 0 0 318px;}
+    #shopify-section-{{section.id}}.home-image-gallery .dt-sc-section-wrapper{padding-bottom:120px;}
+  }  */
+
+   @media screen and (max-width:1199px){
+     
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(2){margin: 0;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(3){margin:0;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(4){margin: 0;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(5){margin:0;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(6){margin:0;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){margin: 0;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item{display:grid;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .image-bar__section-inner{display:grid; float:inherit; grid-gap:30px; grid-template-columns:repeat(3,1fr);} 
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item{width:auto; height:280px;}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){position:relative; transform:translateX(10%); -webkit-transform:translateX(10%); left:100%;}
+        #shopify-section-{{section.id}}.home-image-gallery .dt-sc-section-wrapper{padding-bottom:125px;}
+   }
+  
+  @media screen and (max-width:767px){
+     #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .image-bar__section-inner{display:grid; float:inherit; grid-gap:30px; grid-template-columns:repeat(2,1fr);} 
+     #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){position:relative; transform:translateX(-45%); -webkit-transform:translateX(-45%); left:100%;}
+     #shopify-section-{{section.id}}.home-image-gallery .dt-sc-section-wrapper{padding-bottom:70px;}
+     #shopify-section-{{section.id}}.home-image-gallery .image-bar__item .image-gallery-overlay .image-overlay-title{font-size:18px;}
+  }
+  
+  
+  
+    @media screen and (max-width:576px){
+      
+      #shopify-section-{{section.id}}.home-image-gallery .image-bar__section .image-bar__section-inner{grid-template-columns:repeat(1,1fr);}
+       #shopify-section-{{section.id}}.home-image-gallery .image-bar__item:nth-child(7){position:static; transform:translateX(0); -webkit-transform:translateX(0); left:0;}
+   
+    }
+  
+  {% for block in section.blocks %}
+  
+     #shopify-section-{{section.id}}.home-image-gallery .image-bar__item.{{block.type}}-{{block.id}} .image-gallery-overlay { 
+    background: {{ block.settings.image_overlay_color  | color_modify: 'alpha', 0.9 }};  transition:var(--DTBaseTransition);
+   }
+  
+  {% endfor %}
+  
+</style>
+{% if section.settings.enable_slider %}
+<script type="text/javascript">  
+  function homeImageGallery(){
+    var dataSectionType = $('[data-section-type="home-image-gallery"]');
+    var id = dataSectionType.attr('data-section-id');    
+    var ItemsPerView = +dataSectionType.attr('data-item-per-view');
+    // var ItemsRow = +dataSectionType.attr('data-item-row');
+    var ItemsSpace = +dataSectionType.attr('data-item-space');
+    var autoHeight = +dataSectionType.attr('data-auto-height') || false;
+    var ItemsLimit = +dataSectionType.attr('data-blocks-limit');
+    var Autoplay = +dataSectionType.attr('data-autoplay') * 1000;
+    var mobileSlides = +dataSectionType.attr('data-small-screen-items') || 1;
+    var initAutoplay = Autoplay ? {    delay: Autoplay  } : false;    
+    var swiper = new Swiper('#swiper-' + id + '-slider', {  
+      pagination: {
+        el: '#swiper-' + id + '-pagination',
+        clickable: true
+      },
+      navigation: {
+        nextEl: '#swiper-' + id + '-next',
+        prevEl: '#swiper-' + id + '-prev'
+      },
+      loop: false,
+      slidesPerView: ItemsPerView,   
+      // slidesPerColumn: ItemsRow,
+      spaceBetween: ItemsSpace,
+      autoHeight: autoHeight,    
+      simulateTouch: true,
+      autoplay: initAutoplay,
+      breakpoints: {
+        320: {
+          slidesPerView: mobileSlides,
+          spaceBetween: 20,
+        },
+        640: {
+          slidesPerView: 2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 3,
+          spaceBetween: 40,
+        },
+        1024: {
+          slidesPerView: ItemsPerView,
+          spaceBetween: 50,
+        },
+      },
+    });
+  }
+  $(document).ready(function(){    
+    homeImageGallery();
+  })
+  $(document)
+  .on('shopify:section:load', homeImageGallery)
+  .on('shopify:section:unload', homeImageGallery)
+</script>
+{% endif %}
+{% schema %}
+{
+"name": "Image list",
+"class": "index-section home-image-gallery",
+"max_blocks": 10,
+"settings": [
+{
+"type": "checkbox",
+"id": "full",
+"label": "Show Full width"
+},
+{
+"type": "checkbox",
+"id": "spacing_both_ends",
+"label": "Enable Right & Left Spacing (Works only on Fullwidth)",
+"default": false
+},
+{
+"type": "text",
+"id": "padding",
+"label": "Style value (Padding)",
+"default":"0,0",
+"info":"Top(px),Bottom(px)"
+},
+{
+"type": "text",
+"id": "margin",
+"label": "Style value (Margin)",
+"default":"0,0",
+"info":"Top(px),Bottom(px)"
+},
+{
+"type": "image_picker",
+"id": "background_image",
+"label": "Background image",
+"info": "Size: 1920x1280"
+},
+{
+"type": "checkbox",
+"id": "show_background_image",
+"label": "Enable Background image"
+},
+{
+"type": "select",
+"id": "background_style",
+"label": "Background Style",
+"default": "none",
+"options": [
+{
+"value": "fixed",
+"label": "Fixed"
+},
+{
+"value": "parallax",
+"label": "Parallax"
+},
+{
+"value": "none",
+"label": "None"
+}
+]
+},
+{
+"type": "select",
+"id": "background_size",
+"label": "Background Size",
+"info": "This will not apply for parallax",
+"default": "auto",
+"options": [
+{
+"value": "auto",
+"label": "Auto"
+},
+{
+"value": "cover",
+"label": "Cover"
+},
+{
+"value": "contain",
+"label": "Contain"
+},
+{
+"value": "repeat",
+"label": "Repeat"
+}
+]
+},
+{
+"type": "checkbox",
+"id": "enable_overlay",
+"label": "Enable Background Color (Used as Background Image Overlay Color too)"
+},
+{
+"type": "color",
+"id": "background_color",
+"label":"Background color"
+},
+{
+"type": "text",
+"id": "overlay_transparency",
+"label": "Overlay Transparency (0.01 to 1)",
+"default": "0.5"
+},
+{
+"type": "text",
+"id": "section_heading",
+"label": "Main Heading",
+"default": "Image list"
+},
+{
+"type": "text",
+"id": "section_sub_heading",
+"label": "Sub Heading",
+"default": "Sub Heading"
+}, 
+ {
+  "type": "image_picker",
+  "id": "header_image",
+  "label": "header image",
+  "info": "Size:120x30"
+  },
+{
+"type": "text",
+"id": "section_description",
+"label": "Description",
+"default": "Use this text to share the information which you like!."
+},  
+{
+"type": "text",
+"id": "section_button_text",
+"label": "Link text"
+},
+{
+"type": "url",
+"id": "section_button_link",
+"label": "Link URL"
+},
+
+{
+"type": "header",
+"content": "Section Color settings"
+},
+{
+"type": "color",
+"id": "section_heading_color",
+"label": "Heading color"
+},    
+{
+"type": "color",
+"id": "section_sub_heading_color",
+"label": "Sub heading color"
+},   
+{
+"type": "color",
+"id": "section_description_color",
+"label": "Description color"
+},  
+{
+"type": "color",
+"id": "section_button_bg_color",
+"label": "Button bg color"
+},   
+{
+"type": "color",
+"id": "section_button_text_color",
+"label": "Button text color"
+},   
+{
+"type": "color",
+"id": "section_button_hover_bg_color",
+"label": "Button hover bg color"
+},   
+{
+"type": "color",
+"id": "section_button_hover_text_color",
+"label": "Button hover text color"
+},
+{
+"type": "select",
+"id": "heading_position",
+"label": "Heading Position",
+"options": [
+{
+"value": "text-center",
+"label": "Center"
+},
+{
+"value": "text-start",
+"label": "Left"
+},
+{
+"value": "text-end",
+"label": "Right"
+}
+]
+},
+{
+"type": "header",
+"content": "Block Settings"
+},
+{
+"type": "select",
+"id": "grid",
+"label": "Items per row",
+"default": "5",
+"options": [
+{
+"value": "1",
+"label": "1"
+},
+{
+"value": "2",
+"label": "2"
+},
+{
+"value": "3",
+"label": "3"
+},
+{
+"value": "4",
+"label": "4"
+},
+{
+"value": "5",
+"label": "5"
+},
+{
+"value": "6",
+"label": "6"
+}
+]
+},
+{
+"type": "text",
+"id": "column_gap",
+"label": "Column Gap",
+"default":"30",
+"info": "Units not needed"
+},
+{
+"type": "text",
+"id": "image_list_text",
+"label": "Gallery Link text"
+},
+{
+"type": "url",
+"id": "image_list_link",
+"label": "Gallery Link URL"
+},
+{
+"type": "header",
+"content": "Item Height Settings"
+}, 
+{	
+"type": "range",	
+"id": "item_height",	
+"label": "Item Height",
+"min": 50,	
+"max": 1000,	
+"step": 10,	
+"default": 450,	
+"unit": "px"	
+},
+{	
+"type": "range",	
+"id": "item_height_laptop",	
+"label": "Item Height - Laptop (Small Screens)",
+"min": 50,	
+"max": 1000,	
+"step": 10,	
+"default": 400,	
+"unit": "px"	
+},
+{	
+"type": "range",	
+"id": "item_height_tab",	
+"label": "Item Height - Tablet",
+"min": 50,	
+"max": 1000,	
+"step": 10,	
+"default": 350,	
+"unit": "px"	
+},
+{	
+"type": "range",	
+"id": "item_height_mobile",	
+"label": "Item Height - Mobile",
+"min": 50,	
+"max": 1000,	
+"step": 10,	
+"default": 300,	
+"unit": "px"	
+},
+{
+"type": "header",
+"content": "Image Link Color settings"
+},
+{
+"type": "color",
+"id": "image_link_bg_color",
+"label": "Gallery Link bg color"
+},   
+{
+"type": "color",
+"id": "image_link_text_color",
+"label": "Gallery Link text color"
+},   
+{
+"type": "color",
+"id": "image_link_hover_bg_color",
+"label": "Gallery Link hover bg color"
+},   
+{
+"type": "color",
+"id": "image_link_hover_text_color",
+"label": "Gallery Link hover text color"
+},
+{
+"type": "color",
+"id": "image_overlay_icon_color",
+"label": "Gallery icon color"
+},
+
+
+{
+"type": "text",
+"id": "icon_size",
+"label": "Icon Size (in px)",
+"default": "24"
+},
+{
+"type": "header",
+"content": "Carousel Settings"
+},
+{
+"type": "checkbox",
+"id": "enable_slider",
+"label": "Enable Carousel",
+"default": false
+},
+{
+"type": "checkbox",
+"id": "remove_button_space",
+"label": "Adjust Space, If Paginations are Disabled",
+"default": false
+},
+{
+"type": "checkbox",
+"id": "enable_auto_height",
+"label": "Enable auto height",
+"default": true
+},
+
+{
+"type": "range",
+"id": "items_per_view",
+"label": "Slide per row [Desktop]",
+"min": 1,
+"max": 6,
+"step": 1,
+"default": 4,
+"info": "Maximum of 2 Slides, if List View is enabled"
+},
+{
+"type": "range",
+"id": "items_laptop_view",
+"label": "Slide per row [Laptop]",
+"min": 1,
+"max": 5,
+"step": 1,
+"default": 3,
+"info": "Maximum of 2 Slides, if List View is enabled"
+},
+{
+"type": "range",
+"id": "items_tablet_view",
+"label": "Slide per row [Tablet]",
+"min": 1,
+"max": 4,
+"step": 1,
+"default": 2,
+"info": "Maximum of 1 Slides, if List View is enabled"
+},
+{
+"type": "range",
+"id": "items_mobile_view",
+"label": "Slide per row [Mobile]",
+"min": 1,
+"max": 3,
+"step": 1,
+"default": 1,
+"info": "Maximum of 1 Slides, if List View is enabled"
+},
+{
+"type":	"range",
+"id": "slider_autoplay",
+"min": 0,
+"max": 7,
+"step": 1,
+"label": "Autoplay timing",
+"default": 0,
+"unit": "sec",
+"info": "Use 0 to stop auto rotate"
+},
+{
+"type": "checkbox",
+"id": "dots",
+"label": "Enable Carousel Pagination",
+"default": true
+},
+{
+"type": "select",
+"id": "carousel_pagination_alignment",
+"label": "Carousel Pagination Alignment (Only Bottom)",
+"options": [
+{
+"value": "left_pagination",
+"label": "Left Aligned"
+},
+{
+"value": "center_pagination",
+"label": "Center Aligned"
+},
+{
+"value": "right_pagination",
+"label": "Right Aligned"
+}
+],
+"default": "center_pagination"
+},
+{
+"type": "checkbox",
+"id": "arrows",
+"label": "Enable Navigation Arrows",
+"default": true
+},
+{
+"type": "select",
+"id": "nav_arrow_position",
+"label": "Navigation Arrows position",
+"options": [
+{
+"value": "navigation-top-left",
+"label": "Top Left"
+},
+{
+"value": "navigation-top-center",
+"label": "Top Center"
+},
+{
+"value": "navigation-top-right",
+"label": "Top Right"
+},
+{
+"value": "center-navigation",
+"label": "Center"
+},
+{
+"value": "navigation-bottom-left",
+"label": "Bottom left"
+},
+{
+"value": "navigation-bottom-center",
+"label": "Bottom center"
+},
+{
+"value": "navigation-bottom-right",
+"label": "Bottom right"
+}     
+],
+"default": "navigation-bottom-center"
+},
+{
+"type": "select",
+"id": "center_nav_arrow_alignment",
+"label": "Center navigation alignment (Select 'Center', in the above dropdown)",
+"options": [
+{
+"value": "outside_container",
+"label": "Outside Container (not for Full width Section)"
+},
+{
+"value": "along_with_container",
+"label": "Along with Container"
+},
+{
+"value": "inside_container",
+"label": "Inside Container"
+}
+],
+"default": "outside_container"
+},
+{
+"type": "color",
+"id": "navigation_button_color",
+"label": "Navigation Button Bg Color"
+}, 
+{
+"type": "color",
+"id": "navigation_button_icon_color",
+"label": "Navigation Button Icon Color"
+}, 
+{
+"type": "color",
+"id": "navigation_button_hover_color",
+"label": "Navigation Button Hover Bg Color"
+}, 
+{
+"type": "color",
+"id": "navigation_button_hover_icon_color",
+"label": "Navigation Button Hover Icon Color"
+}, 
+{
+"type": "color",
+"id": "navigation_dot_color",
+"label": "Navigation Dot Color"
+}, 
+{
+"type": "color",
+"id": "navigation_dot_active_color",
+"label": "Navigation Dot Active Color"
+},
+
+{
+"type": "header",
+"content": "Custom class"
+},
+{
+"type": "text",
+"id": "custom_class_name",
+"label": "Add your custom class name here"
+}
+],
+"blocks": [
+{
+"type": "image_image",
+"name": "Image",
+"settings": [
+{
+"type": "image_picker",
+"id": "image",
+"label": "Image"
+},
+{
+"type": "text",
+"id": "icon_class",
+"label": "Font Awesome icon class",
+"default": "fa fa-instagram"   
+},
+{
+"type": "url",
+"id": "icon_link",
+"label": "Icon Link (Optional)"
+},
+{
+"type": "text",
+"id": "overlay_title",
+"label": "Image Title",
+"default": "Shop the Look"   
+},
+{
+"type": "url",
+"id": "link",
+"label": "Link (Optional)"
+},
+{
+"type": "color",
+"id": "image_overlay_color",
+"label": "Gallery overlay color"
+}
+]
+}
+],
+"presets": [
+{
+"name": "Image list",
+"category": "Image",
+"blocks": [
+{
+"type": "image_image"
+},
+{
+"type": "image_image"
+},
+{
+"type": "image_image"
+},
+{
+"type": "image_image"
+},
+{
+"type": "image_image"
+}
+]
+}
+]
+}
+{% endschema %}