WordPress商店子分类滑块CSS修复：桌面端点击箭头滑动5个分类

CSS 解决方案 #

如果滑块基于CSS滚动实现，可通过调整滚动对齐规则和项目宽度来强制每次滑动5个分类：

/* 桌面端视图生效 */
@media (min-width: 1024px) {
  /* 替换为实际的滑块容器类名 */
  .subcategory-slider-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
  }
  /* 替换为实际的滑块子项类名 */
  .subcategory-slider-item {
    scroll-snap-align: start;
    flex: 0 0 calc(20% - 12px); /* 5个项目均分容器宽度，减去间距 */
  }
  /* 隐藏原生滚动条，保留箭头控制 */
  .subcategory-slider-container::-webkit-scrollbar {
    display: none;
  }
  .subcategory-slider-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

提示：使用浏览器开发者工具（F12）定位滑块容器和子项的实际类名，替换上述代码中的占位类名。

JavaScript 解决方案（更稳定） #

若CSS调整无效，说明滑块的滑动逻辑由JS控制，需修改点击箭头时的滚动距离：

// 绑定下箭头点击事件
document.querySelector('.slider-next-arrow').addEventListener('click', function(e) {
  e.preventDefault();
  const slider = document.querySelector('.subcategory-slider-container');
  const item = document.querySelector('.subcategory-slider-item');
  if (!slider || !item) return;

  const itemWidth = item.offsetWidth;
  const gap = parseInt(window.getComputedStyle(slider).gap) || 0;
  // 计算5个项目的总宽度（含间距）
  const slideAmount = (itemWidth + gap) * 5;
  slider.scrollBy({ left: slideAmount, behavior: 'smooth' });
});

// 绑定上箭头点击事件
document.querySelector('.slider-prev-arrow').addEventListener('click', function(e) {
  e.preventDefault();
  const slider = document.querySelector('.subcategory-slider-container');
  const item = document.querySelector('.subcategory-slider-item');
  if (!slider || !item) return;

  const itemWidth = item.offsetWidth;
  const gap = parseInt(window.getComputedStyle(slider).gap) || 0;
  const slideAmount = (itemWidth + gap) * 5;
  slider.scrollBy({ left: -slideAmount, behavior: 'smooth' });
});

操作步骤 #

1. 用浏览器开发者工具定位滑块容器、子项、箭头按钮的实际选择器
2. 替换代码中的占位选择器
3. 在浏览器控制台测试代码，确认滑动步长正确
4. 将代码添加到主题的自定义CSS/JS面板，或通过代码片段插件注入

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