(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 =>
<style>
.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;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div class="collection page-width">
<div class="title-wrapper-with-link">
<h2 class="title">
{{ section.settings.title }}
</h2>
</div>
</div>
<div class="dawn-product-slider">
<div class="carousel">
{% for block in section.blocks %}
<div class="carousel-cell">
<img src="{{ block.settings.custom_image | img_url: 'master' }}" border="0" width="100%" height="450px" />
</div>
{% endfor %}
</div>
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
{%- if section.settings.slider_visual == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}">
{%- if section.settings.slider_visual == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<!-- <span class="dot"></span> -->
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}">
{% render 'icon-caret' %}
</button>
<noscript>
<div class="slider-buttons">
<div class="slider-counter">
{%- for block in section.blocks -%}
<a
href="#Slide-{{ section.id }}-{{ forloop.index }}"
class="slider-counter__link link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}">
{{ forloop.index }}
</a>
{%- endfor -%}
</div>
</div>
</noscript>
</div>
{% 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' %}
<script>
var carousel = document.querySelector('.dawn-product-slider .carousel');
var slider = new Flickity(carousel, {
lazyLoad: 2,
wrapAround: true,
prevNextButtons: false,
pageDots: false
});
</script>
{% else %}
<script>
var carousel = document.querySelector('.dawn-product-slider .carousel');
var slider = new Flickity(carousel, {
lazyLoad: 2,
wrapAround: true,
prevNextButtons: false,
});
</script>
{% 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.
