Product carousel is not working and not show the data

[William_031]

Hello,
I am going to design a section which is change there products when the we are click on the button Like this section which is shown in the picture bellow:

I am doing the all code regarding this but it couldn't show the data on the screen i am also add the section on home page  but still not showing
i will share the code regarding this kindly check it and if you know anything about this then kindly tell me 
i am also share the preview link of the website where i am applying this functionality: https://vv0aebhi3s10aji1-64058720515.shopifypreview.com/ 
SS of the Inspect: 

Liquid Code:

{% capture products_carousel %}
{%- assign paginate_index = section.settings.paginate_index | plus: 0 -%}
{%- if section.settings.home_featured_products == blank -%}
{%- if collections["frontpage"].products.size > 0 -%}
{%- assign collection = collections["frontpage"] -%}
{%- else -%}
{%- assign collection = collections["all"] -%}
{%- endif -%}
{%- else -%}
{%- assign collection = collections[section.settings.home_featured_products ] -%}
{%- endif -%}
{%- if section.settings.home_featured_products_2 == blank -%}
{%- if collections["frontpage"].products.size > 0 -%}
{%- assign collection_2 = collections["frontpage"] -%}
{%- else -%}
{%- assign collection_2 = collections["all"] -%}
{%- endif -%}
{%- else -%}
{%- assign collection_2 = collections[section.settings.home_featured_products_2 ] -%}
{%- endif -%}
{%- assign gl_colum_width = 'col-galaxy' -%}
{%- case section.settings.products_hover -%}
{%- when 'base' -%}
{%- assign gl_include = 'section_loop_product_base' -%}
{%- when 'alt' -%}
{%- assign gl_include = 'section_loop_product_alt' -%}
{%- when 'button' -%}
{%- assign gl_include = 'section_loop_product_button' -%}
{%- when 'info' -%}
{%- assign gl_include = 'section_loop_product_info' -%}
{%- when 'link' -%}
{%- assign gl_include = 'section_loop_product_link' -%}
{%- when 'standard' -%}
{%- assign gl_include = 'section_loop_product_standard' -%}
{%- when 'excerpt' -%}
{%- assign gl_include = 'section_loop_product_excerpt' -%}
{%- when 'quick' -%}
{%- assign gl_include = 'section_loop_product_quick' -%}
{%- endcase -%}
{%- assign settings_pr_img_size = section.settings.use_eq_height -%}
{%- assign loop_countdown = section.settings.loop_sale_countdown -%}
{%- case section.settings.countdown_style -%}
{%- when 'light' -%}
{%- assign countdown_style = 'color-scheme-dark timer-size-small timer-style-standard' -%}
{%- when 'dark' -%}
{%- assign countdown_style = 'color-scheme-light timer-size-small timer-style-standard' -%}
{%- when 'transparent_1' -%}
{%- assign countdown_style = 'color-scheme-light timer-size-small timer-style-transparent' -%}
{%- when 'transparent_2' -%}
{%- assign countdown_style = 'color-scheme-dark timer-size-small timer-style-transparent' -%}
{%- endcase -%}
{%- if section.settings.sale_countdown -%}
{%- assign section_settings_countdown = true -%}
{%- else -%}
{%- assign section_settings_countdown = false -%}
{%- endif -%}

{%- if section.settings.section_margin_top != blank or section.settings.section_margin_bottom != blank or section.settings.section_border != blank -%}
{%- assign s_margin_top = section.settings.section_margin_top | remove: ' ' | join: ' ' -%}
{%- assign s_margin_bottom = section.settings.section_margin_bottom | remove: ' ' | join: ' ' -%}
{%- assign s_border = section.settings.section_border | remove: ' ' | split: '-' | join: ' ' -%}
{%- endif -%}
{%- capture style_block_section -%}
{%- if section.settings.section_margin_top != blank or section.settings.section_margin_bottom != blank or section.settings.section_padding_top != blank or section.settings.section_padding_right != blank or section.settings.section_padding_left != blank or section.settings.section_padding_bottom != blank or section.settings.section_bg_color != blank or section.settings.section_bg_image != blank or section.settings.section_border != blank -%}
<style type="text/css">.gl_custom_{{section.id}}{ {%- if section.settings.section_margin_top != blank -%} margin-top: {{s_margin_top}} !important;{%- endif -%}{%- if section.settings.section_margin_bottom != blank -%} margin-bottom: {{s_margin_bottom}} !important;{%- endif -%}{%- if section.settings.section_padding_top != blank -%}padding-top: {{section.settings.section_padding_top}} !important;{%- endif-%}{%- if section.settings.section_padding_right != blank -%}padding-right: {{section.settings.section_padding_right}} !important;{%- endif-%}{%- if section.settings.section_padding_bottom != blank -%}padding-bottom: {{section.settings.section_padding_bottom}} !important;{%- endif-%}{%- if section.settings.section_padding_left != blank -%}padding-left: {{section.settings.section_padding_left}} !important; {%- endif -%}{%- if section.settings.section_bg_color != blank -%}background-color: {{ section.settings.section_bg_color }} !important;{%- endif -%}{%- if section.settings.section_bg_image != blank -%}{%- assign image = section.settings.section_bg_image -%}{%- assign image_size = image.width | append:'x' -%} background-image: url({%-include 'gl_image_format',src: image , size: image_size -%}) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;{%- endif -%}{%- if section.settings.section_border != blank and section.settings.section_border_color != blank -%}border-width: {{ s_border }} !important; border-color: {{section.settings.section_border_color}} !important; border-style: {{section.settings.section_border_style}} !important{%- endif -%} }</style>
{%- endif -%}
{%- endcapture -%}
{%- capture data_section -%}
{%- if section.settings.row_stretch == 'stretch_row' -%}
{%- assign class_has_fill = 'gl_row-has-fill' -%}
data-gl='has_section_gl_js' data-gl-full-width='true' data-gl-full-width-init='true'
{%- elsif section.settings.row_stretch == 'stretch_row_content' or section.settings.row_stretch == 'stretch_row_content_no_spaces' -%}
{%- assign class_has_fill = 'gl_row-has-fill' -%}
data-gl='has_section_gl_js' data-gl-full-width='true' data-gl-full-width-init='true' data-gl-stretch-content='true'
{%- else -%}
{%- assign class_has_fill = '' -%}
{%- endif -%}
{%- endcapture -%}
{%- assign number = section.settings.silder_per_view | plus: 0 -%}
{%- if section.settings.shop_image_size != blank -%}{%- assign crop_nt = section.settings.shop_image_size -%}{%- endif -%}
{%- assign current_page = '1' -%}

{%- paginate collection.products by paginate_index -%}
<div {{ data_section }} data-section-id="{{ section.id }}" data-section-type="carousel-collection-section" {%- if section.settings.use_video and section.settings.video_url != blank %} data-gl-video-bg="{{ section.settings.video_url }}"{%- endif %} class="gl_custom_{{section.id}} featured-collection{%- if section.settings.row_stretch == 'stretch_row_content_no_spaces' %} gl_row-no-padding{%- endif %}{%- if section.settings.use_parallax %} basel-parallax{%- endif %} gl_row spb_row gl_row-fluid {{class_has_fill}} {%- if section.settings.use_video and section.settings.video_url != blank %} opacity-video-bg gl_video-bg-container gl_has_youtube{%- endif %}{%- if section.settings.full_height %} gl_row-o-full-height gl_row-o-columns-{{section.settings.columns_position}}{%- endif %}{%- if section.settings.equal_height %} gl_row-o-equal-height{%- endif -%}">
<div class="spb_column gl_column_container gl_col-sm-12 gl_section_product_carousel">

{%- if section.settings.home_featured_products_2 != blank -%}
<div class="title-wrapper buttons_wrap">

<span>
<button class="first_collection switch_collection active_collection">{{collection.title}}</button>
<button class="second_collection switch_collection">{{collection_2.title}}</button>
</span>
</div>
{% endif %}


<div class="gl_column-inner first_collection_wrap wws">
{%- comment -%}
By default, featured products come from your Frontpage collection.
This collection is empty by default and must have products added to it
{%- endcomment -%}
<div class="spb_wrapper">
<div class="{%- if settings_pr_img_size -%}equal-columns {% endif -%}{{section.settings.image_size}} gl_carousel_container">
<div class="owl-carousel gl_carousel_data" data-time='{{ section.settings.silder_speed | plus: 0 }}' data-nav='{%- if section.settings.hide_button -%}false{%- else -%}true{%- endif -%}' data-items='{{ number }}' data-dots='{%- if section.settings.hide_pagination -%}false{%- else -%}true{%- endif -%}' data-autoplay='{%- if section.settings.autoplay -%}true{%- else -%}false{%- endif -%}' data-loop='{%- if section.settings.slider_loop -%}true{%- else -%}false{%- endif -%}' data-medium='{%- if number > 2 -%}{{ number | minus: 1 }}{%- else -%}2{%- endif -%}'>
{%- for product in collection.products -%}
<div class="product-item owl-carousel-item">
<div class="owl-carousel-item-inner">
{%- include gl_include -%}
</div>
</div>
{%- else -%}
{%- comment -%}
If collection is empty, show onboarding state
For onboarding new users to your theme, we add some default products and onboarding tutorials to help populate their store
{%- endcomment -%}
{%- assign home_onboarding_index = 1 -%}
{%- for i in (1..8) -%}
{%- case i -%}
{%- when 7 -%}
{%- assign home_onboarding_index = 1 -%}
{%- when 8 -%}
{%- assign home_onboarding_index = 2 -%}
{%- endcase -%}
<div class="product-item owl-carousel-item">
<div class="owl-carousel-item-inner">
<div class="product-grid-item product basel-hover-alt">
<div class="product-element-top">
<a href="/admin/products">
{{ 'product-' | append: home_onboarding_index | placeholder_svg_tag: 'product-item__image icon icon--placeholder' }}
</a>
</div>
<h3 class="product-title"><a href="/admin/products">{{ 'homepage.onboarding.product_title' | t }}</a></h3>
<div class="wrap-price">
<div class="wrapp-swap">
<div class="swap-elements">
<span class="price">£219.00</span>
<div class="btn-add"><a href="/admin/products" class="button add_to_cart_button">{{ 'products.product.add_to_cart' | t }}</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
{%- assign home_onboarding_index = home_onboarding_index | plus: 1 -%}
{%- endfor -%}
{%- endfor -%}
</div>
</div>
</div>
{% if section.settings.viewmore_url %}
<div style="text-align:center; width:100%;"><a href="{{ section.settings.viewmore_url }}" class="button btn">View More</a></div>
{% endif %}
</div>


{%- if section.settings.home_featured_products_2 != blank -%}
<div class="gl_column-inner second_collection_wrap">
{%- comment -%}
By default, featured products come from your Frontpage collection.
This collection is empty by default and must have products added to it
{%- endcomment -%}
<div class="spb_wrapper">
<div class="{%- if settings_pr_img_size -%}equal-columns {% endif -%}{{section.settings.image_size}} gl_carousel_container">
<div class="owl-carousel gl_carousel_data" data-time='{{ section.settings.silder_speed | plus: 0 }}' data-nav='{%- if section.settings.hide_button -%}false{%- else -%}true{%- endif -%}' data-items='{{ number }}' data-dots='{%- if section.settings.hide_pagination -%}false{%- else -%}true{%- endif -%}' data-autoplay='{%- if section.settings.autoplay -%}true{%- else -%}false{%- endif -%}' data-loop='{%- if section.settings.slider_loop -%}true{%- else -%}false{%- endif -%}' data-medium='{%- if number > 2 -%}{{ number | minus: 1 }}{%- else -%}2{%- endif -%}'>
{%- for product in collection_2.products -%}
<div class="product-item owl-carousel-item">
<div class="owl-carousel-item-inner">
{%- include gl_include -%}
</div>
</div>
{%- else -%}
{%- comment -%}
If collection is empty, show onboarding state
For onboarding new users to your theme, we add some default products and onboarding tutorials to help populate their store
{%- endcomment -%}
{%- assign home_onboarding_index = 1 -%}
{%- for i in (1..8) -%}
{%- case i -%}
{%- when 7 -%}
{%- assign home_onboarding_index = 1 -%}
{%- when 8 -%}
{%- assign home_onboarding_index = 2 -%}
{%- endcase -%}
<div class="product-item owl-carousel-item">
<div class="owl-carousel-item-inner">
<div class="product-grid-item product basel-hover-alt">
<div class="product-element-top">
<a href="/admin/products">
{{ 'product-' | append: home_onboarding_index | placeholder_svg_tag: 'product-item__image icon icon--placeholder' }}
</a>
</div>
<h3 class="product-title"><a href="/admin/products">{{ 'homepage.onboarding.product_title' | t }}</a></h3>
<div class="wrap-price">
<div class="wrapp-swap">
<div class="swap-elements">
<span class="price">£219.00</span>
<div class="btn-add"><a href="/admin/products" class="button add_to_cart_button">{{ 'products.product.add_to_cart' | t }}</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
{%- assign home_onboarding_index = home_onboarding_index | plus: 1 -%}
{%- endfor -%}
{%- endfor -%}
</div>
</div>
</div>
{% if section.settings.viewmore_url %}
<div style="text-align:center; width:100%;"><a href="{{ section.settings.viewmore_url_2}}" class="button btn">View More</a></div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{%- endpaginate -%}
{%- unless section.settings.row_stretch == 'default' -%}
<div class="gl_row-full-width gl_clearfix"></div>
{%- endunless -%}

{% endcapture %}

<script type="text/lazyscript">

let products_slider_{{section.id}} = `{{ products_carousel | escape }}`;

function append_products_{{section.id}}_function(){
let products_slider_decoded = $('<textarea />').html(products_slider_{{section.id}}).text();

$('#shopify-section-{{section.id}}').append(products_slider_decoded);
baselThemeModule.init();
}
setTimeout(function(){ append_products_{{section.id}}_function(); }, 1000);
</script>
{%- schema -%}
{
"name": "Featured collection 2",
"class": "index-section carousel-collection-section",
"settings": [{
"type": "header",
"content": "== Row Settings"
},
{
"type": "select",
"id": "row_stretch",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "stretch_row",
"label": "Stretch row"
},
{
"value": "stretch_row_content",
"label": "Stretch row and content"
},
{
"value": "stretch_row_content_no_spaces",
"label": "Stretch row and content (no paddings)"
}
],
"label": "___ Row stretch",
"info": "Select stretching options for row and content (Note: stretched may not work properly if parent container has 'overflow: hidden' CSS property).",
"default": "default"
},
{
"type": "header",
"content": "== General Settings"
},
{
"type": "collection",
"id": "home_featured_products",
"label": "___ Collection"
},
{
"type": "collection",
"id": "home_featured_products_2",
"label": "___ Collection 2"
},
{
"type": "text",
"id": "paginate_index",
"label": "___ Items per page ( integer )",
"info": "Number of items to show per page.",
"default": "8"
},
{
"type": "url",
"id": "viewmore_url",
"label": "___ View More link"
},
{
"type": "url",
"id": "viewmore_url_2",
"label": "___ View More link New Arrival"
},
{
"type": "header",
"content": "___ Carousel Settings"
},
{
"type": "text",
"id": "silder_speed",
"label": "Slider speed ( integer )",
"info": "Duration of animation between slides (in ms).",
"default": "5000"
},
{
"type": "select",
"id": "silder_per_view",
"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"
},
{
"value": "7",
"label": "7"
},
{
"value": "8",
"label": "8"
}
],
"label": "Slides per view",
"default": "4",
"info": "Set numbers of slides you want to display at the same time on slider's container for carousel mode."
},
{
"type": "checkbox",
"id": "hide_pagination",
"default": false,
"label": "Hide pagination control?",
"info": "pagination control will be removed"
},
{
"type": "checkbox",
"id": "hide_button",
"default": false,
"label": "Hide prev/next buttons?",
"info": "prev/next control will be removed"
},
{
"type": "checkbox",
"id": "slider_loop",
"default": false,
"label": "Slider loop?",
"info": "Enables loop mode."
},
{
"type": "checkbox",
"id": "autoplay",
"label": "___ Slider autoplay",
"info": "Enables autoplay mode.",
"default": false
},
{
"type": "header",
"content": "== Design settings"
},
{
"type": "select",
"id": "products_hover",
"label": "Products hover",
"default": "alt",
"options": [
{
"value": "base",
"label": "Base"
},
{
"value": "alt",
"label": "Alternative"
},
{
"value": "button",
"label": "Show button on hover on image"
},
{
"value": "info",
"label": "Full info on hover"
},
{
"value": "link",
"label": "Button on hover"
},
{
"value": "standard",
"label": "Standard button"
},
{
"value": "excerpt",
"label": "With excerpt"
},
{
"value": "quick",
"label": "Quick shop"
}
]
},
{
"type": "paragraph",
"content": "Products hover not support Image Second: Show button on hover on image, Full info on hover."
},
{
"type": "checkbox",
"id": "sale_countdown",
"default": false,
"label": "Use Sale countdown",
"info": "Countdown to the end sale date will be shown. Be sure you have set final date of the product sale price. product.metafields.meta.countdown ( 2017/08/17 )"
},
{
"type": "checkbox",
"id": "loop_sale_countdown",
"default": false,
"label": "Use Auto Loop countdown"
},
{
"type": "select",
"id": "countdown_style",
"label": "Countdown style",
"default": "dark",
"options": [
{
"value": "light",
"label": "Countdown timer light"
},
{
"value": "dark",
"label": "Countdown timer dark"
},
{
"value": "transparent_1",
"label": "Countdown timer transparent 1"
},
{
"value": "transparent_2",
"label": "Countdown timer transparent 2"
}
]
},
{
"type": "header",
"content": "== Design Image"
},
{
"type": "checkbox",
"id": "use_eq_height",
"label": "Use equal height images?",
"default": false
},
{
"type": "select",
"id": "image_size",
"label": "Image size",
"default": "jas_cover",
"options": [
{
"value": "jas_cover",
"label": "Full"
},
{
"value": "jas_contain",
"label": "Auto"
}
]
},
{
"type": "header",
"content": "== Design Options"
},
{
"type": "color",
"id": "section_bg_color",
"label": "Background color"
},
{
"type": "color",
"id": "section_border_color",
"label": "Border color"
},
{
"type": "select",
"id": "section_border_style",
"options": [
{
"value": "solid",
"label": "Solid"
},
{
"value": "dotted",
"label": "Dotted"
},
{
"value": "dashed",
"label": "Dashed"
},
{
"value": "double",
"label": "Double"
},
{
"value": "groove",
"label": "Groove"
},
{
"value": "Ridge",
"label": "Ridge"
},
{
"value": "inset",
"label": "Inset"
},
{
"value": "outset",
"label": "Outset"
}
],
"label": "Border style",
"default": "solid"
},
{
"type": "text",
"id": "section_border",
"label": "Borders Integer px ( top-right-bottom-left )",
"info": "0-0-1px-0"
},
{
"type": "text",
"id": "section_margin_top",
"label": "Margin top",
"info": "60px"
},
{
"type": "text",
"id": "section_margin_bottom",
"label": "Margin bottom",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_top",
"label": "Padding top",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_right",
"label": "Padding right",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_bottom",
"label": "Padding bottom",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_left",
"label": "Padding left",
"info": "60px"
}],
"presets": [{
"name": "new Product Carousel 2",
"category": "Collections"
}]
}
{% endschema %}

Js code:
/* product hide and show */
$(document).on('click', '.first_collection', function(){
var parent_wrap = $(this).parents('.gl_section_product_carousel')
parent_wrap.find(".first_collection_wrap").show();
parent_wrap.find(".second_collection_wrap").hide();
$('.second_collection').removeClass("active_collection");
$(this).addClass("active_collection");
});
$(document).on('click', '.second_collection', function(){
var parent_wrap = $(this).parents('.gl_section_product_carousel')
parent_wrap.find(".second_collection_wrap").show();
parent_wrap.find(".first_collection_wrap").hide();
$('.first_collection').removeClass("active_collection");
$(this).addClass("active_collection");
console.log('second_collection clicked',
parent_wrap.find(".second_collection_wrap").length,
parent_wrap.find(".first_collection_wrap").length
);
});

If anyone have the knowledge about this kindly tell me.

[KetanKumar]

@William_031 

oh sorry but i can't see that section at your home page can you please show me 

[William_031]

this is the problem exactly i apply this code at the backend but it is not show on the site