Slick Slider Width 0 On Initial Page Load

Question

I'm running into a really weird issue with a Slick Slider.

Sometimes, on the very first page load the slide and track width are being set to 0.

I've tried many of the solutions out there including:

• Setting a timeout and then calling slick
• Triggering a window resize event via JS
• Setting min-height of all slick elements to 1
• Putting the images in a div container

I can't for the life of me figure out how to fix this issue. Any help would be greatly appreciated!

Live example (any product page)

jQuery

    // Slick Slider on Product Page
    $('.slick-carousel').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        lazyLoad: 'ondemand',
        arrows: false,
        fade: true,
        asNavFor: '.slick-thumbnails'
    });
    $('.slick-thumbnails').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slick-carousel',
        focusOnSelect: true,
        arrows: false,
        mobileFirst: true,
        responsive: [{
            breakpoint: 768,
            settings: {
                vertical: true
            }
        }]
    });

HTML (Bootstrap 4)

<div class="col-12 col-md-10 col-lg-8 mx-auto order-1 order-md-2 slick-carousel">
  <div>
    <img class="img-fluid" src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" onload="$(window).trigger('resize')"/>
  </div>
</div>

CSS

.slick-thumbnail-container {
    * {
        min-height:0;
    }

    flex-direction: row;
    padding: 2rem 0;

    .icon {
        font-size: 1.25rem;
        color: $gray-light;
    }
}

.slick-thumbnails {

    * {
        min-height:0;
    }

    .slick-slide {
        margin: 0 12px;
    }

    .slick-list {
        margin: 0 -12px;
    }
}

@include media-breakpoint-up(md) {

    .product-description-container {
        padding: 2rem;
        border-radius: $border-radius;
        margin: 3rem auto 4rem;

        .add-to-cart {
            width: auto;
        }
    }

    .slick-thumbnail-container {

        * {
            min-height:0;
        }

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .slick-thumbnails {

        * {
            min-height:0;
        }

        .slick-slide {
            margin: 12px 0;
        }

        .slick-list {
            margin: -12px 0;
        }
    }

    .slick-carousel {

        * {
            min-height:0;
        }

        display: flex;
        align-items: center;
        padding: 1rem 0 4rem;
        justify-content: center;
        width: 100%;
        max-height: 100%;

    }

}

Thibaut

Answer 1

Have you tried to run one of these commands on the slick

$('.slider-class').slick('setPosition').slick();

or

$('.slider-class').slick('destroy').slick();

or

$('.slider-class').slick('unslick').slick();

or

$('.slider-class').slick('unslick').slick('reinit').slick();

or

$('.slider-class').on('init', function(event, slick){
  console.log("initialised")
  $('.slider-class').slick()
});

or maybe checking if the slick-initialized class is on the slider and then calling $('.slider-class').slick()

I hope you find your solution. :)

Lomalomas

$('.slick-carousel').slick('unslick').slick('reinit').slick(); actually works! Thanks for the solution - had all but given up. – Thibaut

Answer 2

In my case, I solved it running....

$('.my-slideshow').slick("refresh");

This will help when you're dynamically updating the slides on some show & hide stuffs, maybe also when window resizing....

Minium

I coupled this with a setTimeout() and it worked - thanks! – Bloomfield

I combined with $(window).on('load', {…}) – Expert

Answer 3

Use $(window).on('load', function() { } instead of $(document).ready(function(){} during slick initialisation

Kibe

Answer 4

Check your css.

If you set display: flex; on the .slider-class, it will get in the way.

Defer

Answer 5

The solution is to use variableWidth: true on the slick configuration. full codes are as follows.

  $('.product_wrap .cart-popup-product-wrap').each(function(){
      $(this).find('.main_images').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        infinite: false,
        variableWidth: true,
        asNavFor: $(this).find('.thumb_images')
      });
      
      $(this).find('.thumb_images').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: $(this).find('.main_images'),
        centerMode: false,
        infinite: false,
        variableWidth: true,
        focusOnSelect: true
      });
     });

Vine

Answer 6

Make sure the container has a width specified.

In my case putting width: 100% on the div containing the slider fixed the issue.

Idiolect

Answer 7

As mentioned on a Github comment, adding .slick-slide { height: auto; } should do the trick.

Expert

Answer 8

In my case container where slick slide placed are width: auto.

I made it specific width (in my case it is width: 90%) and it solved my problem.

Ethicize