切换带slick carousel的标签页后轮播组件变窄如何解决？

问题根因 #

Slick轮播组件初始化时会读取父容器的可见宽度来计算自身轮播项、轨道的尺寸，而通过hidden(display: none)隐藏的标签页DOM节点不会参与浏览器的渲染树计算，节点宽高均为无效值，因此默认初始化的隐藏标签页内的Slick轮播拿到的宽度异常，就会出现宽度变窄的问题。手动切换轮播slide时Slick会主动触发一次尺寸重算，所以组件会自动恢复正常。 #

可行解决方案 #

• 方案1：延迟初始化轮播
  页面加载时仅初始化当前激活态标签页内的Slick轮播，其余标签页的轮播等到对应标签被切换激活时再执行初始化逻辑，从根源避免读取无效宽高的问题。
• 方案2：标签切换时强制触发Slick重绘
  标签切换完成的回调中，调用Slick内置的slick('setPosition')方法，该方法会强制Slick重新读取当前容器尺寸、刷新整体布局。
  如果使用Bootstrap Tabs，可直接监听标签切换完成事件触发重绘，示例代码如下：

  // 适配Bootstrap 5的标签切换事件
  document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tab => {
    tab.addEventListener('shown.bs.tab', e => {
      const activePanel = document.querySelector(e.target.getAttribute('href'))
      $(activePanel).find('.slick-carousel').slick('setPosition')
    })
  })
  

  自定义标签切换逻辑直接在hidden类移除、标签完全可见后执行上述重绘调用即可。
• 方案3：替换标签隐藏实现逻辑
  不使用display: none实现隐藏，改用visibility: hidden + position: absolute + 宽高置0的方式隐藏非激活标签，该方式下浏览器依然会计算节点的原始尺寸，Slick初始化时可拿到正确的宽高值，注意要额外添加pointer-events: none避免隐藏状态下的节点被误触发点击。

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