I'm facing an issue with my slick-carousel where there seems to be a large padding on the right side of the images, extending all the way up to the next product image. I've tried removing margins and paddings from my code but it hasn't resolved the problem. My goal is to have the images without any space in between so that I can add my own padding on both sides. Below is the HTML/Shopify Liquid code I am currently using:
{%- assign collection = collections[section.settings.collection]-%}
<div class="collection-title_wrapper">
<h1>{{ collection.title }}</h1>
</div>
{%- if collection.description != blank -%}
<p>{{ collection.description }}</p>
{%- endif -%}
<div data-slick='{"slidesToShow": 3}' class="feature-grid-collection collection-slider">
{% for product in collection.products %}
<div class="grid-product">
<div class="collection-slider-images">
<a href="{{ product.url }}">
<div class="collection-slider-image_wrapper">
<img src="{{ product.featured_image.src | img_url: '400x' }}"
alt="{{ product.featured_image.alt | escape }}">
</div>
</a>
</div>
{% unless product.available %}<br><strong>sold out</strong>{% endunless %}
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Product Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Your Collection"
}
],
"presets": [
{
"name": "Product Slider",
"category": "Product Display"
}
]
}
{% endschema %}
Here is the CSS:
.collection-slider {
.slick-track {
display: flex;
width: 100%;
}
.slick-prev {
left: 0;
z-index: 999;
}
.slick-next {
right: 0;
z-index: 999;
}
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
display: inline-block;
}
.grid-product {
display: grid;
justify-content: center;
color: white;
line-height: 1;
border-radius: 5px;
}
Google Inspect screenshot: https://i.sstatic.net/ZCVGu.png
Website link: kuduzovic.myshopify.com, password: soltew. Feel free to check Google Inspect for yourself and see if you can identify the issue.
EDIT: Adding more details as some clarity may be required. The problem arises when adding slick to the section, causing random margin or padding only on the right side of the images. Clicking on this extra space behaves as if clicking on the actual image itself. For reference, here are images depicting the issue with and without slick added: -Without slick: https://i.sstatic.net/DFM3O.png -With slick: https://i.sstatic.net/x1NEC.png