Slick carousel is adding blank slides between my actual slides - html

Question

So I have setup a slick carousel in my shopify page, I ran into an issue though. So I have 5 slides set up. When the slick carousel loads, it puts blank slides between my actual slides.
How do I get rid of them?
Here is how it looks:
Here's my code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="slider-container">
<div class="image-container Pre_slide">
{% for block in section.blocks %}
<div class="image-title">
{{ block.settings.slide_title }}
</div>
<div class="slider-image">
<img src="{{ block.settings.slide_image | img_url: 'master' }}">
</div>
{% endfor %}
</div>
</div>
<script>
$('.image-container').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
</script>
{% schema %}
{
"name": "Carousel Slider",
"tag": "section",
"class": "slideshow",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Slideshow"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "Image"
},
{
"type": "text",
"id":"slide_title",
"label":"Title"
}
]
}
],
"presets": [
{
"name": "Carousel Slider"
}
]
}
{% endschema %}
<style>
.slider-container {
margin-bottom: 50vh;
}
.image-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.slider-image {
padding: 0 1vw 0 1vw;
}
.slider-image img {
border-radius: 10px;
}
</style>
So because of the word/code ratio I have to put some extra details so here I go. Ive been trying to make a slideshow kinda thing where it automatically slides from one item to another... well it was all going well until this bug/glitch/issue popped up... so here I am asking for your help.
Thank you in advance!

Answer 1

You have to wrap one slide into one single DIV:
<div class="new-single-slide-div">
<div class="image-title">
{{ block.settings.slide_title }}
</div>
<div class="slider-image">
<img src="{{ block.settings.slide_image | img_url: 'master' }}">
</div>
</div>
Slick Carousel makes a slide for each div inside the given selector on the .slick() call.
Your calling $('.image-container').slick();
inside your HTML shopify markup {% for block in section.blocks %}. This generates two divs, first the text and second the image. This will generate 2 slides, instead your expected single slide.