Step1: Create a new section name icons-slider.liquid and paste the following code
Icon Slider Shopify For All Themes: Easily add icon slider on your Shopify theme without any additional paid APP
{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}
{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
{%- assign max_width = section.settings.max_width -%}
{%- else -%}
{%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}
{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0;box-shadow: none;}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
{%- if section.settings.override_theme_font != blank -%}
{%- for font in font_array -%}
{%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
{%- endfor -%}
#WP--{{ section.id }} {
--main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
--main-font-weight: {{ section.settings.main_font.weight }};
--main-font-style: {{ section.settings.main_font.style }};
--heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
--heading-font-weight: {{ section.settings.heading_font.weight }};
--heading-font-style: {{ section.settings.heading_font.style }};
}
{%- endif -%}
#WP--{{ section.id }} {
background: {{ section.settings.background_color }};
margin-top: {{ section.settings.outer_margin }}px;
margin-bottom: {{ section.settings.outer_margin }}px;
overflow-x: hidden;
{%- if section.settings.per_row >= section.blocks.size -%}
--draggable: false;
--show-arrows: false;
{%- else -%}
--draggable: true;
--show-arrows: {{ section.settings.show_arrows }};
{%- endif -%}
}
#WP--{{ section.id }} .wbs-pack__sizer {
padding-top: {{ section.settings.inner_padding }}px;
padding-bottom: {{ section.settings.inner_padding }}px;
width: {{ section.settings.base_width }}%;
max-width: {{ max_width }};
margin: 0 auto;
}
#WP--{{ section.id }} .wbs-pack__small-heading {
color: {{ section.settings.heading_color }};
line-height: calc(3px + 2ex + 3px);
font-size: calc(var(--WP-g-small-heading-size, var(--WP-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
}
#WP--{{ section.id }} .wbs-pack__small-heading + .wbs-pack__text {
margin-top: 10px;
}
#WP--{{ section.id }} .wbs-pack__text p {
line-height: calc(3px + 2ex + 3px);
color: {{ section.settings.text_color }};
font-size: calc(var(--WP-g-body-size, var(--WP-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
#WP--{{ section.id }} .wbs-pack__icons {
display: block;
max-width: calc(100% - 100px);
margin-left: auto;
margin-right: auto;
}
#WP--{{ section.id }} .wbs-pack__flex-item {
height: auto;
margin-right: calc( ({{ section.settings.per_row }} * {{ section.settings.gap }}px) / ({{ section.settings.per_row }} - 1));
width: calc(100% / {{ section.settings.per_row }} - {{ section.settings.gap }}px);
display: inline-block;
}
#WP--{{ section.id }} .wbs-pack__stretch-height .wbs-pack__flex-item {
height: 100%;
}
#WP--{{ section.id }} .wbs-pack__flex-item > a {
text-decoration: none;
}
#WP--{{ section.id }} .wbs-pack__image__wrapper {
display: block;
align-self: center;
margin: auto;
flex: 1 0 {{ section.settings.icon_size }}%;
max-width: {{ section.settings.icon_size }}%;
position: relative;
}
#WP--{{ section.id }} .wbs-pack__image__wrapper svg {
width: 100%;
fill: {{ section.settings.text_color }};
}
#WP--{{ section.id }} .wbs-pack__item img {
width: 100%;
object-fit: contain;
}
#WP--{{ section.id }} .wbs-pack__inner-content {
height: 100%;
display: flex;
gap: 10px;
padding: {{ section.settings.gap | divided_by: 2.0 }};
position: relative;
overflow: hidden;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-left {
align-items: center;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-left .wbs-pack__inner-content {
gap: 20px;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-left .wbs-pack__text-wrapper {
text-align: left;
flex: 1 1 auto;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-left .wbs-pack__text-wrapper a{
text-decoration: none;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-center .wbs-pack__text-wrapper {
text-align: center;
flex: 1 1 100%;
padding: 10px;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-center .wbs-pack__text-wrapper a {
text-decoration: none;
}
#WP--{{ section.id }} .wbs-pack__icon-alignment-center .wbs-pack__image__wrapper {
width: {{ section.settings.icon_size }}%;
flex: none;
position: relative;
}
#WP--{{ section.id }} .wbs-pack__icons:not(.flickity-enabled) {
display: flex;
gap: 10px;
}
#WP--{{ section.id }} .wbs-pack__icons:not(.flickity-enabled) .wbs-pack__flex-item:nth-child(n+{{ section.settings.per_row | plus: 1 }}){
display: none;
}
#WP--{{ section.id }} .flickity-button {
background: transparent;
color: {{ section.settings.text_color }};
transition: all 0.3s ease-in-out;
{%- if enable_slider == false -%}
visibility: hidden;
{%- endif -%}
}
#WP--{{ section.id }} button svg.flickity-button-icon path {
fill: currentColor;
}
#WP--{{ section.id }} .flickity-prev-next-button.next {
right: -40px;
}
#WP--{{ section.id }} .flickity-prev-next-button.previous {
left: -40px;
}
/* Animation */
{%- if section.settings.animation != 'none' -%}
#WP--{{ section.id }}.wbs-pack__animation-applied [style*="--wbs-pack-animate"] {
/* animation-duration: 0.5s; */
/* --wbs-pack-animation-multiplier: 1s; */
animation-name: wbs-pack__animation--{{ section.settings.animation }};
}
{%- else -%}
#WP--{{ section.id }} [style*="--wbs-pack-animate"] {
opacity: 1;
}
{% endif %}
{%- if section.settings.custom_css != blank -%}
{%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
{%- for declaration in custom_section_declarations -%}
{%- if declaration contains '{' -%}
#WP--{{ section.id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
#WP--{{ section.id }} {
{%- assign mobile_per_row = section.settings.mobile_per_row | plus: 0 -%}
{%- if mobile_per_row >= section.blocks.size -%}
--draggable: false;
--show-arrows: false;
{%- else -%}
--draggable: true;
--show-arrows: {{ section.settings.show_arrows }};
{%- endif -%}
}
#WP--{{ section.id }} .wbs-pack__icons {
max-width: calc(100% - 40px);
}
#WP--{{ section.id }} .wbs-pack__item {
width: calc(100% / {{ section.settings.mobile_per_row }});
{% if section.settings.mobile_per_row == "2" %}
margin-left: 0;
margin-right: 0;
{% endif %}
}
#WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-left {
align-items: center;
}
#WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-left .wbs-pack__text-wrapper {
text-align: left;
}
#WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-center {
flex-direction: column;
}
#WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-center .wbs-pack__text-wrapper {
text-align: center;
}
#WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-center .wbs-pack__image__wrapper {
width: {{ section.settings.mobile_icon_size }}%;
}
#WP--{{ section.id }} .wbs-pack__image__wrapper {
display: block;
align-self: center;
margin: auto;
flex: 1 0 {{ section.settings.mobile_icon_size }}%;
max-width: {{ section.settings.mobile_icon_size }}%;
}
#WP--{{ section.id }} .wbs-pack__inner-content {
padding: 1em 0;
{% if section.settings.mobile_per_row == "2" %}
padding: 1em 1.4em;
{% endif %}
}
#WP--{{ section.id }} .flickity-button {
visibility: visible;
}
#WP--{{ section.id }} .flickity-prev-next-button.next {
right: -20px;
}
#WP--{{ section.id }} .flickity-prev-next-button.previous {
left: -20px;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
#WP--{{ section.id }} {
margin-top: {{ section.settings.outer_margin | divided_by: 2 }}px;
margin-bottom: {{ section.settings.outer_margin | divided_by: 2 }}px;
}
#WP--{{ section.id }} .wbs-pack__sizer {
min-width: 100%;
padding-top: {{ section.settings.inner_padding | divided_by: 2 }}px;
padding-bottom: {{ section.settings.inner_padding | divided_by: 2 }}px;
}
{%- if section.settings.mobile_custom_css != blank -%}
{%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
{%- for declaration in mobile_custom_declarations -%}
{%- if declaration contains '{' -%}
#WP--{{ section.id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
}
.wbs-pack__image__wrapper svg{
display: block;
}
.wbs-pack__image__wrapper img{
object-fit: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
@media only screen and (min-width: 768px)
{
#WP--{{ section.id }} .wbs-pack__icon-alignment-center {
flex-direction: column;
justify-content: center;
}
}
</style>
{%- comment -%} HTML {%- endcomment -%}
<section id="WP--{{ section.id }}" class="WP--{{ section.id }} wbs-pack__value-prop-horizontal wbs-pack__section" {%- if section.settings.animation != 'none' -%}data-animated-section{%- endif -%}>
<div class="wbs-pack__sizer
wbs-pack__sizer--value-prop-horizontal">
<div id="slider-{{ section.id }}" class="wbs-pack__icons wbs-pack__flex--{{ section.settings.per_row }}-per-row">
{%- for block in section.blocks -%}
{%- capture placeholder_image -%}
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>icons</title><g data-name="24. circle in circle"><path d="M88.47,50C88.19,66.07,78.32,80.78,63,86.23a38.48,38.48,0,0,1-46-56A38.85,38.85,0,0,1,57.82,12.32C75.7,16,88.16,32,88.47,50c0,1.93,3,1.93,3,0A42,42,0,0,0,64.41,11.11a41.48,41.48,0,0,0-50,60.19A41.89,41.89,0,0,0,57.29,90.83c19.79-3.48,33.84-21,34.19-40.83C91.5,48.07,88.5,48.07,88.47,50Z"/><path d="M77.63,50C77.28,65.05,65.32,77.63,50,77.63A27.89,27.89,0,0,1,22.37,50,27.88,27.88,0,0,1,50,22.37c15.33,0,27.28,12.55,27.63,27.63,0,1.93,3,1.93,3,0A31.09,31.09,0,0,0,60.83,21.35a30.88,30.88,0,0,0-34.62,9.37C8.63,52.48,28.32,85.28,55.78,80.08,70.27,77.33,80.29,64.5,80.63,50,80.67,48.07,77.67,48.07,77.63,50Z"/></g></svg>
{%- endcapture -%}
<div class="wbs-pack__flex-item wbs-pack__item wbs-pack__block-{{ block.id }}" {{ block.shopify_attributes }} style="--wbs-pack-animate: {{ forloop.index }};">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
<div class="wbs-pack__inner-content wbs-pack__icon-alignment-{{ section.settings.icon_alignment }} wbs-pack__mobile-icon-alignment-{{ section.settings.mobile_icon_alignment }}">
{%- comment -%} Icon {%- endcomment -%}
{%- if block.settings.show_icon != blank -%}
{%- if block.settings.image != blank -%}
<div class="wbs-pack__image__wrapper">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
<svg viewBox="0 0 {{ block.settings.image.width }} {{ block.settings.image.height }}"></svg>
{%- capture sizes -%}
(max-width: 480px) {{ section.settings.base_width | divided_by: section.settings.mobile_per_row | divided_by: 2 | append: 'vw' | default: '33vw' }}, {{ section.settings.base_width | divided_by: section.settings.per_row | divided_by: 2 | append: 'vw' | default: '33vw' }}
{%- endcapture -%}
{{ block.settings.image | image_url: width: 1000 | image_tag: widths: widths, sizes: sizes }}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- else -%}
<div class="wbs-pack__image__wrapper wbs-pack__flex wbs-pack__justify-center">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{{ placeholder_image | strip }}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
{%- comment -%} End Icon {%- endcomment -%}
<div class="wbs-pack__text-wrapper">
{%- if block.settings.title != blank -%}
<h3 class="wbs-pack__small-heading">
{{ block.settings.title }}
</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="wbs-pack__text wbs-pack__rte">
{{ block.settings.text }}
</div>
{%- endif -%}
</div>
</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}
{% schema %}
{
"name": "Icons Slider",
"class": "WP__value-prop-slider",
"settings": [
{
"type": "select",
"id": "icon_alignment",
"label": "Icon alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
]
},
{
"type": "range",
"id": "icon_size",
"label": "Icon size",
"default": 30,
"min": 10,
"max": 100,
"unit": "%"
},
{
"type": "range",
"id": "per_row",
"label": "Icons per slide",
"default": 3,
"min": 2,
"max": 8
},
{
"type": "range",
"id": "gap",
"min": 0,
"max": 40,
"label": "Spacing gap",
"unit": "px",
"default": 20
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show arrows",
"default": true
},
{
"type": "header",
"content": "Text appearance"
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 60,
"max": 150,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "header",
"content": "Design"
},
{
"type": "color",
"id": "heading_color",
"label": "Headings",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#666666"
},
{
"type": "color_background",
"id": "background_color",
"label": "Background",
"default": "linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 100%)"
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "select",
"id": "mobile_icon_alignment",
"label": "Icon alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
]
},
{
"type": "range",
"id": "mobile_icon_size",
"label": "Mobile icon size",
"default": 30,
"min": 10,
"max": 100,
"unit": "%"
},
{
"type": "select",
"id": "mobile_per_row",
"label": "Mobile icons per slide",
"default": "1",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "base_width",
"label": "Size",
"min": 80,
"max": 100,
"step": 5,
"default": 95,
"unit": "%"
},
{
"type": "text",
"id": "max_width",
"label": "Maximum width",
"placeholder": "eg. 1200px",
"info": "Sets width constraint for content."
},
{
"type": "range",
"id": "inner_padding",
"label": "Inner padding",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 40,
"step": 5,
"unit": "px"
},
{
"type": "range",
"id": "outer_margin",
"label": "Outer margin",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 0,
"step": 5,
"unit": "px"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "liquid",
"id": "custom_css",
"label": "CSS"
},
{
"type": "liquid",
"id": "mobile_custom_css",
"label": "Mobile CSS",
"info": "Applied on screens less than 480px."
},
{
"type": "checkbox",
"id": "override_theme_font",
"label": "Override default theme font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Heading",
"default": "serif"
},
{
"type": "font_picker",
"id": "main_font",
"label": "Text",
"default": "sans-serif"
}
],
"blocks": [
{
"type": "icon",
"name": "Icon",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Icon"
},
{
"type": "url",
"id": "link",
"label": "Icon link"
},
{
"type": "checkbox",
"id": "show_icon",
"label": "Show icon",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Unique value"
},
{
"type": "richtext",
"id": "text",
"label": "Text"
}
]
}
],
"presets": [
{
"name": "Icons Slider",
"blocks": [
{
"type": "icon",
"settings": {
"title": "Easy.",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
}
},
{
"type": "icon",
"settings": {
"title": "Breezy.",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
}
},
{
"type": "icon",
"settings": {
"title": "Beautiful.",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
}
},
{
"type": "icon",
"settings": {
"title": "Effortless.",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
}
},
{
"type": "icon",
"settings": {
"title": "Simple.",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
}
},
{
"type": "icon",
"settings": {
"title": "Refined.",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
}
}
]
}
]
}
{% endschema %}
{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wbs-pack="{{ section.id }}">
{
"id": {{ section.id | json }},
"animation": {{ section.settings.animation | json }},
"show_arrows": {{ section.settings.show_arrows | json }},
"show_dots": {{ section.settings.show_dots | json }},
"autoplay": {{ section.settings.autoplay | times: 1000 | json }}
}
</script>
{%- comment -%} External scripts {%- endcomment -%}
<script data-wbs-pack-external-js="{{ section.id }}" src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/flickity-2.3.0.pkgd.min.js?v=1671485005" defer></script>
{%- comment -%} JavaScript {%- endcomment -%}
<script data-wbs-pack-js="{{ section.id }}" type="module" defer>
(function(){
const wbsPack = {
settings: {},
animateSection: function(entries, observer){
// Target the first entry available.
let observedSection = entries[0];
if (observedSection.isIntersecting) {
observedSection.target.classList.add('wbs-pack__animation-applied');
}
},
load: function(section){
if (this.settings.animation !== 'none'){
const options = {
root: null,
rootMargin: '0px',
threshold: 0
};
// Construct Intersection Observer.
const observer = new IntersectionObserver( this.animateSection, options );
// Observe if element is present.
if (section) {
observer.observe(section);
}
}
const elem = section.querySelector(`#slider-${wbsPack.settings.id}`);
wbsPack.flkty = new Flickity( elem, {
cellAlign: 'left',
autoPlay: this.settings.autoplay,
draggable: JSON.parse(getComputedStyle(section).getPropertyValue('--draggable')),
contain: true,
wrapAround: true,
adaptiveHeight: false,
imagesLoaded: true,
prevNextButtons: JSON.parse(getComputedStyle(section).getPropertyValue('--show-arrows')),
pageDots: false,
on: {
ready: () => {
setTimeout(() => {
elem.classList.add('wbs-pack__stretch-height');
}, 500);
}
}
});
},
unload: function(section){
section.classList.remove('wbs-pack__animation-applied')
}
}
window.addEventListener('shopify:section:unload', function (e) {
const settings = document.querySelector(`[data-wbs-pack="${e.detail.sectionId}"]`);
const sectionId = e.detail.sectionId;
const section = document.querySelector(`#WP--${e.detail.sectionId}`);
if (sectionId == wbsPack.settings.id){
wbsPack.unload(section);
}
});
wbsPack.settings = JSON.parse(document.querySelector('[data-wbs-pack="{{ section.id }}"]').innerHTML);
const sectionId = {{ section.id | json }};
const section = document.querySelector(`#WP--${sectionId}`);
if (sectionId == wbsPack.settings.id){
wbsPack.load(section);
}
})()
</script>
