如何在Shopify产品页面添加指定交互规则的非连续滑动滑块

1. 新增滑块HTML结构 #

找到你的Shopify主题对应的产品页模板文件（一般是sections/product-template.liquid或者templates/product.liquid），在你需要放置滑块的位置插入以下代码：

<div class="product-slider-container">
  <button class="slider-btn prev-btn" aria-label="上一个产品">←</button>
  <div class="product-slider">
    <!-- 滑块内的产品项，可替换为Shopify产品循环逻辑动态输出 -->
    <div class="slider-item">产品1展示内容</div>
    <div class="slider-item">产品2展示内容</div>
    <div class="slider-item">产品3展示内容</div>
    <div class="slider-item">产品4展示内容</div>
  </div>
  <button class="slider-btn next-btn" aria-label="下一个产品">→</button>
</div>

2. 添加CSS样式 #

把以下样式加到主题的assets/base.css或者assets/theme.css文件中：

.product-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.product-slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}
.slider-item {
  min-width: 100%;
  flex-shrink: 0;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #fff;
  border: 1px solid #eee;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.prev-btn {
  left: 10px;
}
.next-btn {
  right: 10px;
}
/* 首尾位置禁用对应按钮，实现非连续效果 */
.slider-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

3. 添加交互JS逻辑 #

把以下代码加到主题的assets/theme.js文件末尾，或者直接插入到上文HTML结构的后面：

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.product-slider');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const items = document.querySelectorAll('.slider-item');
  let currentIndex = 0;
  const totalItems = items.length;

  // 更新按钮可用状态
  function updateBtnStatus() {
    prevBtn.classList.toggle('disabled', currentIndex === 0);
    nextBtn.classList.toggle('disabled', currentIndex === totalItems - 1);
  }

  // 滑动到指定索引的产品
  function slideTo(index) {
    currentIndex = index;
    slider.style.transform = `translateX(-${currentIndex * 100}%)`;
    updateBtnStatus();
  }

  prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) slideTo(currentIndex - 1);
  });

  nextBtn.addEventListener('click', () => {
    if (currentIndex < totalItems - 1) slideTo(currentIndex + 1);
  });

  // 初始化按钮状态
  updateBtnStatus();
});

以上实现完全符合需求：滑块为非连续模式，滑到第一个产品时无法再点击上一个，滑到最后一个产品时无法再点击下一个；每次点击箭头按钮仅切换展示1个产品，切换过程有平滑过渡效果。

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