如何在Bootstrap隐藏标签页中正确加载Glide.js滑块

问题根源 #

当Glide滑块在初始隐藏的元素（比如Bootstrap标签页）中初始化时，由于元素处于display: none状态，Glide无法正确读取容器的尺寸数据，导致滑块布局错乱。而窗口 resize 时，Glide会自动触发重绘和尺寸计算，因此布局恢复正常。

解决方案 #

借助Bootstrap标签页的shown.bs.tab事件，在标签页完全显示后，手动调用Glide的update()方法，强制重新计算尺寸并更新布局。

实现步骤 #

1. 初始化所有Glide实例并保存引用，方便后续调用方法
2. 监听标签页的shown.bs.tab事件，在目标标签页显示时，匹配对应的Glide实例并执行update()

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.css">
</head>
<body style="padding:25px; width:370px">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="visible-tab" data-bs-toggle="tab" data-bs-target="#visible" type="button" role="tab" aria-controls="home" aria-selected="true">Visible</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="hidden-tab" data-bs-toggle="tab" data-bs-target="#hidden" type="button" role="tab" aria-controls="profile" aria-selected="false">Hidden</button>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content" style="padding:10px">
    <div class="tab-pane active" id="visible" role="tabpanel" aria-labelledby="visble-tab" tabindex="0">
      <div class="glide" id="glide-visible">
        <div data-glide-el="track" class="glide__track">
          <ul class="glide__slides" style="width:300px">
            <li class="glide__slide">
              <img src="https://picsum.photos/id/1/300/300" />
            </li>
            <li class="glide__slide">
              <img src="https://picsum.photos/id/2/300/300" />
            </li>
            <li class="glide__slide">
              <img src="https://picsum.photos/id/3/300/300" />
            </li>
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--left" data-glide-dir="&lt;">&lt;</button>
          <button class="glide__arrow glide__arrow--right" data-glide-dir="&gt;">&gt;</button>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="hidden" role="tabpanel" aria-labelledby="hidden-tab" tabindex="0">
      <div class="glide" id="glide-hidden">
        <div data-glide-el="track" class="glide__track">
          <ul class="glide__slides">
            <li class="glide__slide">
              <img src="https://picsum.photos/id/4/300/300" />
            </li>
            <li class="glide__slide">
              <img src="https://picsum.photos/id/5/300/300" />
            </li>
            <li class="glide__slide">
              <img src="https://picsum.photos/id/6/300/300" />
            </li>
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--left" data-glide-dir="&lt;">&lt;</button>
          <button class="glide__arrow glide__arrow--right" data-glide-dir="&gt;">&gt;</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.js"></script>
  <script>
    // 保存Glide实例引用
    const glideVisible = new Glide('#glide-visible', { type: 'carousel' }).mount();
    const glideHidden = new Glide('#glide-hidden', { type: 'carousel' }).mount();

    // 监听标签页显示事件
    document.getElementById('myTab').addEventListener('shown.bs.tab', function(event) {
      const targetTabId = event.target.getAttribute('data-bs-target');
      // 根据标签页ID匹配对应的Glide实例
      if (targetTabId === '#visible') {
        glideVisible.update();
      } else if (targetTabId === '#hidden') {
        glideHidden.update();
      }
    });
  </script>
</body>
</html>

核心说明 #

• shown.bs.tab是Bootstrap标签页的专属事件，在标签页完全渲染显示后触发，此时元素已可见，能正确获取尺寸数据
• Glide的update()方法会重新计算滑块的尺寸、布局参数并更新DOM，效果和窗口resize时的自动调整完全一致
• 若有多个含滑块的标签页，可通过标签页的data-bs-target或ID匹配对应Glide实例，避免误操作

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