Hello (website link: https://www.petzyshop.us/?_ab=0&_fd=0&_sc=1),,)
How are you doing?
I recently added a collection list slider to the site, and I have problems displaying it on different devices. The problem is that the same number of collections is displayed in the slider for any device. Can someone help me to make the number of collections displayed on different devices dynamically (at least for desktop and mobile)?
To create the collection list slider, I added a new element (collection_list_slider.liquid) to the sections, in which I put this code:
{%- capture flickity_options -%}
{
“prevNextButtons”: true,
“pageDots”: false,
“contain”: true,
“cellAlign”: “left”,
“groupCells”: true,
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}
{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: ‘x’ %}
{{ section.settings.title }}
data-flickity='{
“cellAlign”: “{{ cell_align }}”,
“pageDots”: false,
“freeScroll”: true,
“contain”: true,
“wrapAround”: {{ wrap_around }}
}'>
{% for product in collection_main.products limit: collection_limit %}
{% endfor %}
{%- for block in section.blocks -%}
{% render ‘card-collection’, card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: 1 %}
{%- endfor -%}
{% schema %}
{
“name”: “Collection Slider”,
“settings”: [
{
“type”: “color”,
“id”: “bg”,
“label”: “Background Color”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Featured Collection Slider”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.collection-list.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.collection-list.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.collection-list.settings.image_ratio.options__3.label”
}
],
“default”: “square”,
“label”: “t:sections.collection-list.settings.image_ratio.label”,
“info”: “t:sections.collection-list.settings.image_ratio.info”
},
{
“type”: “select”,
“id”: “cell_align”,
“label”: “Slide Alignment”,
“options”: [
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “center”
},
{
“type”: “range”,
“id”: “title_mb”,
“min”: 30,
“max”: 120,
“step”: 1,
“unit”: “px”,
“label”: “Title Margin Bottom”,
“default”: 48
},
{
“type”: “select”,
“id”: “cell_width”,
“label”: “Choose number of slides to show on start”,
“options”: [
{
“value”: “33.3333333333333%”,
“label”: “three”
},
{
“value”: “25%”,
“label”: “four”
},
{
“value”: “20%”,
“label”: “five”
},
{
“value”: “14.28571429%”,
“label”: “seven”
}
],
“default”: “25%”
},
{
“type”: “radio”,
“id”: “wrap_around”,
“label”: “Enable Wrap Around (endless scrolling)”,
“options”: [
{
“value”: “true”,
“label”: “True”
},
{
“value”: “false”,
“label”: “False”
}
],
“default”: “true”
},
{
“type”: “range”,
“id”: “mr”,
“min”: 0,
“max”: 48,
“step”: 1,
“unit”: “px”,
“label”: “Cell Margin Right”,
“default”: 16,
“info”: “Save page to see changes.”
}
],
“blocks”: [
{
“type”: “collection”,
“name”: “Collection”,
“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “Select collection”
}
]
}
],
“presets”: [
{
“name”: “Collection Slider”,
“category”: “Slider”
}
]
}
{% endschema %}
