折叠面板内的Slick轮播在variableWidth设为false时失效

点击Collapsible Group Item #1后，面板内的Slick轮播在设置variableWidth: false时完全失效，但将该参数改为variableWidth: true时就能正常工作。

问题原因 #

折叠面板初始状态是隐藏的（带有collapse类），Slick在页面加载时初始化，此时轮播容器的宽度为0。当variableWidth: false时，Slick需要依赖容器宽度自动计算每个slide的宽度，容器宽度为0会导致计算逻辑出错，轮播无法正常渲染；而variableWidth: true时，Slick会直接使用每个slide自身的宽度，不受容器初始宽度影响，因此能正常显示。

解决方案 #

利用Bootstrap折叠面板的shown.bs.collapse事件，在面板完全展开后，调用Slick的setPosition方法重新计算轮播的位置和尺寸：

修改后的JavaScript代码 #

$(function() {
    $('.step-slider-a').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: true,
      infinite: false,
      dots: false,
      variableWidth: false,
      responsive: [
        {
          breakpoint: 992,
          settings: {
            slidesToShow: 3,
          }
        },
        {
          breakpoint: 768,
          settings: {
            draggable: true,
            slidesToScroll: 1,
            slidesToShow: 1,
            centerMode: false,
            arrows: true,
            dots: false,
          }
        }
      ]
    });
    
    // 启用这段代码，在折叠面板展开后重新设置Slick布局
    $('a[data-toggle="collapse"]').on('shown.bs.collapse', function () {
      $('.step-slider-a').slick('setPosition');
    })
});

说明 #

shown.bs.collapse事件会在折叠面板完全展开（动画结束）后触发，此时轮播容器已经拥有正确的宽度，调用slick('setPosition')可以让Slick重新计算所有slide的尺寸和位置，彻底解决variableWidth: false时的失效问题。

内容的提问来源于stack exchange，提问作者clarkf