光滑的轮播图像自己添加填充

Question

所以我的问题是我安装了一个 slick-carousel，并且我正在使用它以滑块类型的方式显示产品。安装后，我看到图像右侧有一个很大的填充，并且一直到下一个产品的图像。然后我进入我的代码，因为我认为这是一个填充/边距问题。我删除了所有的边距和填充，但这并没有改变任何东西。我想要做的只是让图像之间没有空格，这样我就可以在两边添加自己的填充。这是我正在使用的 HTML/Shopify Liquid 代码：

{%- 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 %}

这是 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 显示的内容：

我的网站的链接是kuduzovic.myshopify.com，密码是soltew，如果其他人想自己检查谷歌检查，看看他们是否能找到任何东西。

编辑： 在这里，我添加了更多信息，因为看起来我不清楚我的问题是什么，我为此道歉。所以我有一个收藏，没有光滑的图像看起来很正常，一切都很好。但是，一旦我在该部分添加了 slick，图像只会在右侧获得随机边距/填充，我正试图摆脱它。一旦您单击该边距，就与单击实际图像一样。

这里有一些关于它在没有和添加光滑时的外观的图片。 - 没有光滑： - 光滑：

Answer 1

这可能会解决问题，（图像不是全宽）

尝试将其添加到 css：

.collection-slider-image_wrapper {
    margin: 10px; // adjust to want you want
}

.slick-slide img {
    display: block;
    width: 100%;
}