Custom Image Slider - Remove clickable Image

Store Design
, ,
1

I have some problems with my custom image slider, which i tried to implement in dawn theme. The image slider works fine, the only thing is that i want to remove is the link on the image. Always if i am trying to swipe the slider it will open the error 404 page because the link doesnt exist. Does anyone have an idea how to remove the clickable image?


  

    ## 
      {{ section.settings.title | escape }}
    
  

  

    {% for block in section.blocks %}
    

      
    

    {% endfor %}
  

  

{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and (min-width: 1201px) {
  {% if nav_range == 2 %}
  .dawn-product-slider .carousel-cell {
    width: calc(49% - 10px);
  }
  {% elsif nav_range == 3 %}
  .dawn-product-slider .carousel-cell {
    width: calc(32% - 10px);
  }
  {% elsif nav_range == 4 %}
  .dawn-product-slider .carousel-cell {
    width: calc(24% - 10px);
  }
  {% endif %}
}
.flickity-page-dots .dot {
  background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
  color: {{ section.settings.navigation_color }};
}
{% endstyle %}

{% schema %}
{
  "name": "Images Slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of images in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Images Slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "Upload an Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image slider",
      "category": "Custom"
    }
  ]
}
{% endschema %}
2

The solution is to add the following code:

.dawn-product-slider .carousel-cell {
    pointer-events: none; 
    background: transparent;
    border-radius: 16px;
    margin: auto;
    padding: 18px;
    margin: 12px;
    width: calc(32% - 10px);
  }