Initial page load Slick Track width being set to 0

pjatx commented 6 years ago

I'm running into a really weird issue with a Slick Slider. Usually, 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
Commenting out part of the Slick source code: https://github.com/kenwheeler/slick/issues/362

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)

Steps to reproduce

Click link above (or any other product page after that)

Expected

Slider appears

Actual

Slider and images are invisible

If you then refresh your browser it works fine. I'm stumped! Any help would help me stay within the realm of sanity and would be greatly appreciated.

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>

SASS

.slick-carousel {

  * {
        min-height:1px;
  }

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

khanil commented 6 years ago

I had the same problem. Images causes issue: set initial width or min-width to img.

MIIIG commented 5 years ago

I think it div of the slide

jjdechavez commented 4 years ago

I fixed this issue by adding: setTimeout(() => { $('.your-slick-carousel).slick('refresh); }, 2000);

The reason why the slick-track has width 0 because the slick-carousel still initialize the resource like css and js in order to load the features of the slick-carousel.

willianrr commented 3 years ago

If you have same problem to open modal, in your fuction add : $('your-slick-carousel').slick('refresh');

kenwheeler / slick