如何实现带三个指示点的卡片滑块，新增卡片仅滚动不换行？

需求说明 #

现有4个卡片，需实现横向滚动的滑块，新增卡片时仅横向滚动不自动换行，同时添加三个指示点用于切换视图。

修改后的完整代码 #

HTML

<div class="slider-container">
  <div class="slider">
    <div class="row">
      <div class="card">
        <img src="https://via.placeholder.com/300x200" alt="Product 1">
        <p>$19.99</p>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/300x200" alt="Product 2">
        <p>$29.99</p>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/300x200" alt="Product 3">
        <p>$39.99</p>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/300x200" alt="Product 4">
        <p>$49.99</p>
      </div>
      <!-- 新增卡片会自动横向排列 -->
      <div class="card">
        <img src="https://via.placeholder.com/300x200" alt="Product 5">
        <p>$59.99</p>
      </div>
    </div>
  </div>
  <!-- 指示点容器 -->
  <div class="slider-dots">
    <span class="dot active" data-index="0"></span>
    <span class="dot" data-index="1"></span>
    <span class="dot" data-index="2"></span>
  </div>
</div>

CSS

/* 滑块容器 */
.slider-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.slider {
  overflow-x: auto;
  scroll-behavior: smooth; /* 平滑滚动 */
  /* 隐藏默认滚动条（可选） */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 隐藏滚动条 */
.slider::-webkit-scrollbar {
  display: none;
}

.row {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行 */
  justify-content: flex-start; /* 从左开始排列 */
  margin: 0 auto;
}

.card {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: calc(25% - 20px); /* 保持原宽度，一行最多4个 */
  flex-shrink: 0; /* 禁止卡片收缩 */
  background-color: #fff;
  border: 3px solid #000;
}

.card img {
  max-width: 100%;
}

.card p {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}

/* 指示点样式 */
.slider-dots {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #000;
}

JavaScript

const slider = document.querySelector('.slider');
const dots = document.querySelectorAll('.dot');
const cardWidth = document.querySelector('.card').offsetWidth + 20; // 卡片宽度+左右margin

// 点击指示点滚动到对应位置
dots.forEach(dot => {
  dot.addEventListener('click', () => {
    const index = parseInt(dot.dataset.index);
    // 计算滚动位置：每个指示点对应显示一组卡片，这里按一行4个计算
    const scrollPosition = index * (cardWidth * 4);
    slider.scrollTo({
      left: scrollPosition,
      behavior: 'smooth'
    });
    
    // 更新指示点激活状态
    dots.forEach(d => d.classList.remove('active'));
    dot.classList.add('active');
  });
});

// 滚动时自动更新指示点（可选）
slider.addEventListener('scroll', () => {
  const scrollLeft = slider.scrollLeft;
  // 计算当前激活的指示点索引
  const activeIndex = Math.round(scrollLeft / (cardWidth * 4));
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === activeIndex);
  });
});

代码说明 #

1. 横向滚动实现：

   • 给.slider添加overflow-x: auto开启横向滚动，scroll-behavior: smooth实现平滑滚动
   • 移除.row的flex-wrap: wrap，改为flex-wrap: nowrap禁止卡片换行
   • 给.card添加flex-shrink: 0防止卡片被挤压变形

2. 指示点功能：

   • 创建三个指示点，点击时通过scrollTo滚动到对应位置
   • 自动更新激活的指示点样式，也支持滚动时同步更新

3. 扩展性：新增卡片时，.row会自动横向排列，不会换行，指示点逻辑可根据需要调整每组显示的卡片数量

内容的提问来源于stack exchange，提问作者Дима Пузырин