0

So my problem here is that I have a slick-carousel installed, and I'm using it to display products in a slider-type of way. After installing it I saw that the images have a big padding on the right side, and that it's all the way up to the image of the next product. So then I went into my code because I thought it's a padding/ margin problem. I deleted all the margins and paddings I had but that didn't change anything. What I'm trying to do is just have the images without the space in between so I can add my own padding on both sides. Here is the HTML/Shopify Liquid code I'm 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;
}

And here is what google inspect is showing: This is what google inspect is showing

The link to my website is kuduzovic.myshopify.com and the password is soltew if anyone else wants to check the google inspect for themselves, and see if they can find anything.

EDIT: Here I'm adding some more information because it looks like I was unclear on what my problem is which I apologize for. So I have a collection, and without slick the images look normal and everything works fine. But once I add slick to the section, the images get a random margin/padding only on the right side, which I'm trying to get rid of. And once you click that margin it's the same as if you clicked on the actual image.

Here are some images on how it looks without and with slick added. -Without slick: without slick added -With slick: with slick added

Arnes Kuduzovic
  • 19
  • 5
  • Please check this link. https://stackoverflow.com/questions/30999076/how-add-spaces-between-slick-carousel-item It can be helpful for you. – Enamul Kabir Jun 05 '21 at 14:53
  • Hi, unfortunately it didn't help but I did update my question so feel free to check it out. – Arnes Kuduzovic Jun 05 '21 at 18:10
  • Hi Arnes Kuduzovic, I didn't find your 'Random Collection' section on the website which you have provided. Would you please regenerate it or tell where it is? – Enamul Kabir Jun 06 '21 at 04:41
  • You should be able to see it now, I forgot to publish the theme where the section was. – Arnes Kuduzovic Jun 06 '21 at 06:24
  • 1
    .slick-slide img { width: 100% !important; } // use this code & let me know if it's not fixing. – Enamul Kabir Jun 06 '21 at 06:40
  • It works, thank you so much. Is there any way I could maybe make the images smaller without getting the same problem as before? – Arnes Kuduzovic Jun 06 '21 at 07:27
  • please check this tutorial to more clear about your problem. https://www.youtube.com/watch?v=7DqtFl2KaSg Here you find the solution, how to make the slider in responsive view. – Enamul Kabir Jun 06 '21 at 08:22

1 Answers1

0

This will probably fix the issue, (the image is not full width)

try add this to css:

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

.slick-slide img {
    display: block;
    width: 100%;
}
bacco2
  • 300
  • 2
  • 9
  • Hello, so I tried using this code but it didn't work. I've updated my question, so feel free to check it out and see if you might know a way to fix this problem. – Arnes Kuduzovic Jun 05 '21 at 18:11