寻求带商品计数功能的WooCommerce产品滑块插件

不用纠结找不到现成插件，这个功能自己实现非常简单，核心就是监听滑块的切换事件，计算当前显示的商品范围，再更新计数文本即可。下面以常用的Swiper滑块库为例给出完整实现方案：

1. 基础HTML结构 #

先搭建滑块容器和计数显示区域：

<!-- 产品滑块容器 -->
<div class="product-slider">
  <div class="swiper-wrapper">
    <!-- 这里替换为你的商品卡片 -->
    <div class="swiper-slide">商品1</div>
    <div class="swiper-slide">商品2</div>
    <div class="swiper-slide">商品3</div>
    <div class="swiper-slide">商品4</div>
    <div class="swiper-slide">商品5</div>
    <div class="swiper-slide">商品6</div>
    <div class="swiper-slide">商品7</div>
    <div class="swiper-slide">商品8</div>
    <div class="swiper-slide">商品9</div>
  </div>
  <!-- 滑块导航与分页（可选） -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

<!-- 计数显示栏 -->
<div class="product-count">Pesta & Seafood (<span id="current-range"></span> of <span id="total-items"></span>)</div>

2. 初始化滑块并编写计数逻辑 #

引入Swiper库后，通过监听滑块切换事件来动态更新计数：

// 初始化Swiper，配置每次显示4个商品（对应示例中的1-4）
const swiper = new Swiper('.product-slider', {
  slidesPerView: 4,
  spaceBetween: 20,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
  },
});

// 获取计数相关DOM元素
const currentRangeEl = document.getElementById('current-range');
const totalItemsEl = document.getElementById('total-items');
const totalProducts = swiper.slides.length;

// 更新计数的核心函数
function updateProductCount() {
  // 计算当前显示的起始位置（Swiper索引从0开始，所以+1转成自然计数）
  const startNum = swiper.activeIndex + 1;
  // 计算当前显示的结束位置
  let endNum = startNum + swiper.params.slidesPerView - 1;
  // 处理最后一页商品数量不足的情况
  endNum = endNum > totalProducts ? totalProducts : endNum;
  // 更新页面显示
  currentRangeEl.textContent = `${startNum}-${endNum}`;
  totalItemsEl.textContent = totalProducts;
}

// 页面加载时先执行一次，显示初始计数
updateProductCount();

// 监听滑块切换事件，每次切换后更新计数
swiper.on('slideChange', updateProductCount);

3. 适配原生滑块（无插件） #

如果不用第三方滑块库，核心逻辑依然通用：

• 跟踪当前显示的商品起始索引
• 点击切换按钮时更新起始索引，计算当前显示范围
• 调用updateProductCount函数更新DOM

比如原生JS的简化逻辑：

const totalProducts = document.querySelectorAll('.product-slide').length;
const slidesPerView = 4;
let currentStart = 1;

// 切换下一页按钮点击事件
document.getElementById('next-btn').addEventListener('click', () => {
  if (currentStart + slidesPerView - 1 < totalProducts) {
    currentStart += slidesPerView;
  }
  updateProductCount();
});

// 切换上一页按钮点击事件
document.getElementById('prev-btn').addEventListener('click', () => {
  if (currentStart > 1) {
    currentStart = Math.max(1, currentStart - slidesPerView);
  }
  updateProductCount();
});

// 计数更新函数和之前一致
function updateProductCount() {
  let endNum = currentStart + slidesPerView - 1;
  endNum = endNum > totalProducts ? totalProducts : endNum;
  // 更新DOM...
}

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