Solved

Custom Image Slider - Remove clickable Image

Roxolot
Explorer
66 4 13

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? 

 

 

 

<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: transparent;
    border-radius: 16px;
    margin: auto;
    padding: 18px;
    margin: 12px;
    width: calc(32% - 10px);
  }
  .product-btn {
    width: 100%;
  }
  .dawn-product-slider a {
    color: black;
    text-decoration: none;
  }
  .dawn-product-slider a .title:hover {
    text-decoration: underline;
  }
  .dawn-product-slider a .title,
  .dawn-product-slider a .price {
    margin: 0px;
  }
  .dawn-product-slider .flickity-button.flickity-prev-next-button.previous,
  .dawn-product-slider .flickity-button.flickity-prev-next-button.next {
    background: red;
    color: white;
  }
  .dawn-product-slider:focus-visible,
  .dawn-product-slider .carousel:focus-visible {
    outline: unset;
    outline-offset: unset;
    box-shadow: unset;
  }
  @media only screen and (max-width: 767px) {
    .dawn-product-slider .carousel-cell {
      width: calc(50% - 10px);
    }
  }
  @media only screen and (max-width: 479px) {
    .dawn-product-slider .carousel-cell {
      width: calc(100% - 10px);
    }
  }

  /* Add this to adjust the position of the page dots */
  .flickity-page-dots {
    transform: translateY(-40px); /* Adjust the value as needed to move the dots up or down */
  }
</style>

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<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{% if section.settings.title == blank %} title--no-heading{% endif %}">
      {{ section.settings.title | escape }}
    </h2>
  </div>
</div>
<div class="dawn-product-slider">
  <div class="carousel">
    {% for block in section.blocks %}
    <div class="carousel-cell">
      <img data-flickity-lazyload="{{ block.settings.custom_image | img_url: 'master' }}" border="0" />
    </div>
    {% endfor %}
  </div>
  <!--- Coded by keiwords.com --->
</div>
{% 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 %}
<script>
var elem = document.querySelector('.dawn-product-slider .carousel');
var flkty = new Flickity(elem, {
  contain: true,
  imagesLoaded: true,
  lazyLoad: 2,
  wrapAround: true,
  pageDots: true,
  prevNextButtons: false,
});
{% if request.design_mode %}
document.addEventListener("shopify:section:load", function (event) {
  var elem = document.querySelector('.dawn-product-slider .carousel');
  var flkty = new Flickity(elem, {
    contain: true,
    imagesLoaded: true,
    lazyLoad: 2,
    wrapAround: true,
    pageDots: true,
    prevNextButtons: false,
  });
});
{% endif %}
</script>

<style>
/* Add media query for mobile */
@media only screen and (max-width: 767px) {
  .dawn-product-slider .carousel {
    contain: true;
  }
}
</style>
{% 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 %}

 

 

Accepted Solution (1)

Roxolot
Explorer
66 4 13

This is an accepted solution.

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);
  }

View solution in original post

Reply 1 (1)

Roxolot
Explorer
66 4 13

This is an accepted solution.

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);
  }