如何将含滑块计数器的footer-row置于slider-component外部？

1. 调整HTML结构（Liquid代码） #

修改Featured Collection的Liquid模板，将footer-row从<slider-component>内部移到外部，同时保留分页计数器和按钮在组件内（保证计数功能依赖的组件状态能正常更新）：

<main class="featured-collection">
  <slider-component class="featured-slider">
    <!-- 滑块商品内容 -->
    {% for product in collection.products %}
      <div class="slide">{{ product | product_card: 'medium' }}</div>
    {% endfor %}

    <!-- 分页控件留在slider-component内，用于同步计数 -->
    <div class="slider-controls">
      <button class="slider-prev" aria-label="上一个商品">Prev</button>
      <span class="slider-counter">
        <span class="current-slide">1</span> / <span class="total-slides">{{ collection.products.size }}</span>
      </span>
      <button class="slider-next" aria-label="下一个商品">Next</button>
    </div>
  </slider-component>

  <!-- 新的footer-row，置于slider-component外部 -->
  <footer class="footer-row">
    <a href="/collections/all" class="shop-link">查看全部商品</a>
  </footer>
</main>

2. 修正CSS布局 #

调整main容器的flex规则 #

替换原有的justify-content: space-around，改用min-height:100dvh保证视口高度，同时让滑块垂直居中，避免footer被挤出：

.featured-collection {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* 用min-height而非height，内容超出时自动扩展 */
  justify-content: center; /* 滑块垂直居中 */
  align-items: center; /* 滑块水平居中 */
  gap: 3rem; /* 滑块与footer的间距，可按需调整 */
  padding: 2rem 1rem; /* 避免内容贴边 */
}

定位分页控件到footer区域 #

通过绝对定位把组件内的分页控件移到footer附近，实现视觉上和footer-row整合的效果：

.featured-slider {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 限制滑块最大宽度 */
}

.slider-controls {
  position: absolute;
  bottom: -6rem; /* 把控件移到滑块下方，与footer-row对齐 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-row {
  margin-top: 2rem; /* 给分页控件预留空间 */
  width: 100%;
  max-width: 1200px;
  text-align: center; /* 商品链接居中显示 */
}

/* 响应式适配，避免小屏幕控件与footer重叠 */
@media (max-width: 768px) {
  .slider-controls {
    bottom: -5rem;
    gap: 1rem;
  }
}

3. 确保计数器正常工作 #

Shopify的<slider-component>会自动更新内部.current-slide和.total-slides的数值，只要这两个元素留在组件内，就能同步滑块的分页状态，无需额外编写JS。

4. 解决footer-row居中空隙问题 #

原布局的justify-content: space-around会让footer-row与滑块均分上下空间，导致下方出现空隙。现在通过justify-content: center让滑块居中，footer-row通过gap和margin-top固定在滑块下方，彻底消除多余空隙。

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