Slider组件后续幻灯片无法显示问题求助

问题根源 #

1. 索引更新逻辑错误：原代码中边界判断后仅修改了currentSlideIndex，但未同步到后续计算逻辑，导致位移计算使用的索引值异常。
2. 容器宽度缺失：.slider父容器未设置宽度，导致.slide的width:100%无法正确计算实际宽度，位移值计算错误。
3. 初始化时机问题：未等待DOM完全加载就执行初始化，可能出现元素未就绪、宽度获取为0的情况。

解决方案 #

1. 修正JavaScript逻辑

let currentSlideIndex = 1;

// 等待DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  showSlides(currentSlideIndex);
});

function currentSlide(n) {
  showSlides(currentSlideIndex = n);
}

function showSlides(n) {
  const slides = document.getElementsByClassName("slide");
  const dots = document.getElementsByClassName("dot");

  // 正确更新当前索引
  if (n > slides.length) {
    currentSlideIndex = 1;
  } else if (n < 1) {
    currentSlideIndex = slides.length;
  } else {
    currentSlideIndex = n;
  }

  // 获取slide实际宽度，计算位移
  const slideWidth = slides[0].offsetWidth;
  const moveX = -((currentSlideIndex - 1) * slideWidth);
  document.querySelector('.slides').style.transform = `translateX(${moveX}px)`;

  // 更新导航点激活状态
  Array.from(dots).forEach(dot => dot.classList.remove("active"));
  dots[currentSlideIndex - 1].classList.add("active");
}

2. 补充CSS容器宽度设置

.slider {
  width: 100%; /* 确保父容器有明确宽度 */
  overflow: hidden;
}

.slide {
  flex: none;
  scroll-snap-align: start;
  width: 100%;
}

.slides {
  display: flex;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  transition: transform 0.5s ease-in-out;
}

.navigation {
  padding-top: 25px;
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

3. HTML结构保持不变

原HTML无需修改，确保.slide元素正确嵌套在.slides容器内即可。

修改说明 #

• DOM加载监听：避免初始化时元素未就绪导致的错误。
• 索引逻辑优化：确保currentSlideIndex在所有场景下都被正确赋值，位移计算基于最新索引。
• 类名操作优化：使用classList替代字符串替换，更安全可靠。
• 容器宽度设置：保证.slide的100%宽度能正确映射到父容器宽度，位移计算准确。

内容的提问来源于stack exchange，提问作者Alberto De Maria