Search code examples
htmljquerycssslick.js

Slick carousel is adding blank slides between my actual slides

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: enter image description here

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!

Solution

  • 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.