如何修改精选商品轮播图点击前后箭头滚动的商品数量？

能否通过YAML配置实现？ #

绝大多数电商主题的YAML配置仅提供轮播基础开关、自动播放、单次显示数量这类通用选项，不支持自定义点击前后按钮的滚动步长，所以没法通过YAML配置实现点击一次滚动4个商品的需求，必须修改JavaScript代码。

需要修改JS的话，代码位置和调整方式 #

具体要看你的轮播用的是第三方库还是自定义实现：

情况1：使用Swiper轮播库

这是电商主题里常用的轮播库之一，找到Swiper的初始化代码（通常在assets/js/theme.js、assets/js/carousel.js这类文件，或模板内嵌脚本中），添加/修改slidesPerGroup参数为4：

const featuredCarousel = new Swiper('.featured-products-carousel', {
  slidesPerView: 4, // 单次显示4个商品（按需调整）
  slidesPerGroup: 4, // 点击一次前后按钮滚动4个
  navigation: {
    nextEl: '.swiper-button-next', // 你的下按钮选择器
    prevEl: '.swiper-button-prev', // 你的上按钮选择器
  },
  // 其他已有配置项...
});

情况2：使用Slick轮播库

如果是Slick，找到其初始化代码，修改slidesToScroll参数为4：

$('.featured-products-carousel').slick({
  slidesToShow: 4, // 单次显示数量
  slidesToScroll: 4, // 单次滚动数量
  prevArrow: '.prev-button', // 你的上按钮选择器
  nextArrow: '.next-button', // 你的下按钮选择器
  // 其他已有配置项...
});

情况3：自定义实现的轮播

如果是主题自研的轮播逻辑，找到前后按钮的点击事件监听代码，调整滚动距离计算逻辑：

// 下按钮点击事件
document.querySelector('.next-button').addEventListener('click', function() {
  const carouselContainer = document.querySelector('.featured-products-carousel');
  const singleProductWidth = carouselContainer.querySelector('.product-item').offsetWidth;
  // 计算4个商品的滚动宽度，含间距的话需额外加上间距*4
  const scrollDistance = singleProductWidth * 4 + (parseInt(getComputedStyle(carouselContainer).gap) || 0) * 4;
  carouselContainer.scrollLeft += scrollDistance;
});

// 上按钮点击事件（同理做减法）
document.querySelector('.prev-button').addEventListener('click', function() {
  const carouselContainer = document.querySelector('.featured-products-carousel');
  const singleProductWidth = carouselContainer.querySelector('.product-item').offsetWidth;
  const scrollDistance = singleProductWidth * 4 + (parseInt(getComputedStyle(carouselContainer).gap) || 0) * 4;
  carouselContainer.scrollLeft -= scrollDistance;
});

快速定位代码的方法 #

用浏览器开发者工具（F12）：

1. 在Elements面板找到轮播容器的类名（比如featured-products-carousel）
2. 切换到Sources面板，搜索该类名，或swiper、slick、next、prev这类关键词，即可找到对应的初始化或事件监听代码。

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