Slider Number Pagination Not Working Using Flickity

Shopify Discussion
1

(New to Shopify) As I have an issue in Slider while choosing numbers from theme settings and when I click on numbers for sliding. The Number is not clickable. As I am using Flickity CDN. And I have solved Dots for Clicking. Just remain for number. If anyone can help.

Sharing Code here =>

.dawn-product-slider { max-width: 1600px; margin: auto; padding: 0 20px; padding-bottom: 32px; margin-top: 5px; } .dawn-product-slider img { width: 100%; } .dawn-product-slider .carousel-cell { background: #fff; border-radius: 16px; margin: auto; padding: 18px; margin: 12px; }

{{ section.settings.title }}

{% for block in section.blocks %}
{% endfor %}
{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}
{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}
{%- endif -%}
{% render 'icon-caret' %}
{%- for block in section.blocks -%} {{ forloop.index }} {%- endfor -%}

{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and (min-width: 1201px) {
{% if nav_range == 3 %}
.dawn-product-slider .carousel-cell {
width: 100%;
}
{% endif %}
}
{% endstyle %}

{% if section.settings.slider_visual == ‘numbers’ %}

{% else %}

{% endif %}

{% schema %}
{
“name”: “Images Slider”,
“settings”: [
{
“type”: “range”,
“id”: “navigation_amount”,
“min”: 2,
“max”: 4,
“default”: 3,
“label”: “Change the number of images in slider”
},
{
“type”: “text”,
“id”: “title”,
“default”: “Images Slider”,
“label”: “Slider”
},
{
“type”: “select”,
“id”: “slider_visual”,
“options”: [
{
“value”: “dots”,
“label”: “Dots”
},
{
“value”: “numbers”,
“label”: “Numbers”
}
],
“default”: “dots”,
“label”: “Dots”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “custom_image”,
“label”: “Upload an Image”
}
]
}
],
“presets”: [
{
“name”: “Image slider”,
“category”: “Custom”
}
]
}
{% endschema %}

Thanks.

1 Like