本文详解如何改造固定尺寸的 jquery 滑块，使其自动填充父容器、垂直水平居中，并在窗口缩放时动态响应，特别适配 squarespace 等 cms 的代码块嵌入场景。

本文详解如何改造固定尺寸的 jquery 滑块，使其自动填充父容器、垂直水平居中，并在窗口缩放时动态响应，特别适配 squarespace 等 cms 的代码块嵌入场景。

要让轮播图真正“填满容器并居中”，核心在于解除硬编码宽高约束、建立响应式尺寸计算机制，并确保父级容器具备明确的高度上下文。原代码中 600px × 400px 的固定尺寸和 max-width: 48rem 的限制，正是阻碍自适应的根源。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

✅ 关键改造步骤

1. 移除所有硬编码尺寸
   删除 #slider-wrap、#slider-wrap ul#slider li 中的 width 声明，以及 #wrapper 的 max-width。让元素自然继承父容器宽度。

2. 启用高度继承链
   为使 height: 100% 生效，需确保从 html → body → #wrapper → #slider-wrap 形成连续的高度传递：

   html, body {
     height: 100%;
     margin: 0;
   }
   #wrapper {
     height: 100%; /* 关键：承接父高 */
     margin: 0 auto;
   }
   #slider-wrap {
     height: 100%; /* 占满 wrapper 高度 */
   }
   #slider-wrap ul#slider li {
     height: 100%; /* 每张幻灯片等高 */
   }

3. 动态计算与重置滑块尺寸
   使用 updateSliderWidth() 函数替代静态 sliderWidth 变量，在初始化和窗口缩放时实时获取容器宽度，并同步更新：

   function updateSliderWidth() {
     const wrap = $("#slider-wrap");
     sliderWidth = wrap.width(); // 动态获取当前宽度
   
     $("#slider-wrap ul#slider")
       .width(sliderWidth * totalSlides)
       .css("left", -(sliderWidth * pos)); // 重置当前位置
   
     $("#slider-wrap ul#slider li").width(sliderWidth);
   }
   
   $(document).ready(function() {
     updateSliderWidth();
     $(window).on("resize", updateSliderWidth); // 响应式关键
   });

4. 内容垂直居中优化
   将图标 <i></i> 改为 Flex 容器，实现真正的居中对齐：

   #slider-wrap ul#slider li i {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     font-size: 90px;
   }

⚠️ Squarespace 部署注意事项

• Squarespace 的代码块（Code Block）默认不设置高度，因此 #wrapper 的 height: 100% 可能失效。此时推荐两种方案：
  • 方案一（推荐）：为 #wrapper 添加固定高度（如 min-height: 400px），兼顾响应性与兼容性；
  • 方案二：将 #wrapper 设为绝对定位，覆盖父容器：

    #wrapper {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      margin: 0;
    }

• 移除示例中的 html, body { height: 100% } —— 这仅用于本地演示，在 Squarespace 中可能干扰全局布局。

? 完整可运行结构（精简版）

<div id="wrapper">
  <div id="slider-wrap">
    <ul id="slider">
      <li data-color="#1abc9c"><i class="fa fa-image"></i></li>
      <li data-color="#3498db"><i class="fa fa-gears"></i></li>
      <li data-color="#9b59b6"><i class="fa fa-sliders"></i></li>
    </ul>
    <div class="btns" id="previous"><i class="fa-solid fa-chevron-left"></i></div>
    <div class="btns" id="next"><i class="fa-solid fa-chevron-right"></i></div>
    <div id="pagination-wrap"><ul></ul></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/35d3cb3e33.js" crossorigin="anonymous"></script>
<script>
// JavaScript 逻辑（含 updateSliderWidth、slideLeft/slideRight 等）
</script>

最终效果：轮播图将严格贴合代码块容器尺寸，无论桌面、平板或移动设备，均自动拉伸、居中、响应式切换——无需额外插件，纯 CSS + jQuery 即可实现专业级自适应体验。