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

如何解决光滑的轮播图像自行添加填充

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

这是谷歌检查显示的内容：

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

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

这里有一些关于它在没有和添加光滑的情况下的外观的图像。 - 不光滑：

- 光滑：

解决方法

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

尝试将其添加到 css：

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

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