初始页面加载时Slick滑块宽度为0

Question

我在使用 Slick Slider 时遇到了一个非常奇怪的问题。

有时，在第一次页面加载时，幻灯片和跟踪宽度会被设置为0。

我尝试过很多解决方案，包括：

• 设置延迟时间，然后调用 slick
• 通过 JS 触发窗口大小调整事件
• 将所有 slick 元素的最小高度设置为1
• 将图像放入 div 容器中

我无法弄清楚如何解决这个问题。非常感谢任何帮助！

实例（任意产品页面）

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%;

    }

}

- PJATX

Answer 1

你尝试在Slick上运行这些命令了吗？

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

或者

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

或者

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

或者

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

或者

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

或者检查滑块上是否有 slick-initialized 类，然后调用 $('.slider-class').slick()。

希望你能找到解决方案。:)

- White Rabbit

---

$('.slick-carousel').slick('unslick').slick('reinit').slick(); 真的起作用了！感谢您提供的解决方案-我已经放弃了。 - PJATX

Answer 2

在我的情况下，我通过运行...来解决它。

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

这将有助于在动态更新幻灯片和一些显示和隐藏的内容时，也许还有在窗口调整大小时使用。

- aldrien.h

---

我将它与setTimeout()结合使用，然后它就起作用了 - 谢谢！ - Lazlow

我结合了 $(window).on('load', {…})。 - dibery

Answer 3

在进行 slick初始化 时，请使用 $(window).on('load', function() { } 代替 $(document).ready(function(){}。

- Udayavani

Answer 4

解决方案是在slick配置中使用variableWidth: true。 完整代码如下。

  $('.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
      });
     });

- Igor Revenko

---

这对我有效。 - Lisa

Answer 5

检查你的CSS。

如果在.slider-class上设置display: flex;，它会妨碍。

- yuka

Answer 6

请确保容器已指定宽度。

在我的情况下，将 width: 100% 放在包含滑块的 div 上解决了问题。

- Felix Eve

Answer 7

如在Github的评论中提到的，添加.slick-slide { height: auto; }应该能解决问题。

- dibery