如何制作单页含多张图片的幻灯片 实现特色产品区点击箭头切换3款产品

这个需求属于按组切换的产品轮播，核心逻辑是把所有特色产品按3个为一组拆分，每次点击箭头切换一整组，即可保证每页布局完全统一。以下提供两种实现方案：

方案1：原生HTML/CSS/JS实现（无第三方依赖） #

HTML结构 #

<div class="featured-products">
  <!-- 左切换箭头 -->
  <button class="carousel-arrow arrow-left">&lt;</button>
  <!-- 轮播视口 -->
  <div class="carousel-viewport">
    <div class="carousel-track">
      <!-- 第一组3款产品 -->
      <div class="product-group">
        <div class="product-card">产品1</div>
        <div class="product-card">产品2</div>
        <div class="product-card">产品3</div>
      </div>
      <!-- 第二组3款产品 -->
      <div class="product-group">
        <div class="product-card">产品4</div>
        <div class="product-card">产品5</div>
        <div class="product-card">产品6</div>
      </div>
      <!-- 后续产品组按需添加 -->
    </div>
  </div>
  <!-- 右切换箭头 -->
  <button class="carousel-arrow arrow-right">&gt;</button>
</div>

CSS样式 #

.featured-products {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
}
.arrow-left {
  left: 10px;
}
.arrow-right {
  right: 10px;
}
.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel-viewport {
  overflow: hidden;
  margin: 0 70px; /* 给左右箭头预留显示空间 */
}
.carousel-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}
.product-group {
  min-width: 100%;
  display: flex;
  gap: 24px; /* 产品卡片之间的间距，可按需调整 */
}
.product-card {
  flex: 1; /* 3张卡片平分宽度，保证布局统一 */
  /* 此处补充你原有产品卡片的样式即可 */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

JS交互逻辑 #

const track = document.querySelector('.carousel-track');
const productGroups = document.querySelectorAll('.product-group');
const leftBtn = document.querySelector('.arrow-left');
const rightBtn = document.querySelector('.arrow-right');
let currentGroupIndex = 0;
const totalGroups = productGroups.length;

// 更新箭头禁用状态
function updateBtnState() {
  leftBtn.disabled = currentGroupIndex === 0;
  rightBtn.disabled = currentGroupIndex === totalGroups - 1;
}

// 切换轮播位置
function moveTrack() {
  track.style.transform = `translateX(-${currentGroupIndex * 100}%)`;
  updateBtnState();
}

// 绑定箭头点击事件
rightBtn.addEventListener('click', () => {
  if (currentGroupIndex < totalGroups - 1) {
    currentGroupIndex++;
    moveTrack();
  }
});
leftBtn.addEventListener('click', () => {
  if (currentGroupIndex > 0) {
    currentGroupIndex--;
    moveTrack();
  }
});

// 初始化状态
updateBtnState();

方案2：基于Swiper.js实现（适合需要拓展功能的场景） #

如果需要自动轮播、触摸滑动、分页指示器等额外功能，可以直接用成熟的轮播库实现，核心配置如下：

const productSwiper = new Swiper('.featured-swiper', {
  slidesPerView: 3, // 单页展示3款产品
  slidesPerGroup: 3, // 每次切换3款，按组滚动
  navigation: {
    nextEl: '.arrow-right',
    prevEl: '.arrow-left',
  },
  // 可按需添加其他配置：loop循环、autoplay自动播放、移动端响应式规则等
});

注意事项 #

• 所有产品卡片的样式保持统一即可保证每页布局完全一致，不会出现切换时布局跳动的问题
• 如果是动态加载产品，渲染完成后要重新计算分组总数，使用Swiper的话调用productSwiper.update()方法更新配置即可
• 移动端适配可根据屏幕宽度调整单页展示数量，比如小屏设置单页展示1个、中屏展示2个

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