如何实现Slide轮播循环且避免显示空白Slide？

安全阿岳

2026-7-15

轮播组件切换时出现空白的问题修复

我开发的轮播组件原本可正常循环切换幻灯片，但在轮播过程中的某个节点会出现空白——仅显示带有切换箭头的容器，无幻灯片内容；再次点击上一页（prev）或下一页（next）按钮后，又能恢复正常显示。

原代码

HTML

<div class="slider">
  <div class="slide">
    <div class="content">
      <img src="https://webtroniclabs.com/assets/img/carousel-img/carousel_BTC.webp" alt="Image 1">
      <div class="slide-text">
        <h3>BTC TRADE <br> PROJECT
        </h3>
        <p>A platform that brings sophisticated arbitrage features to crypto traders.</p>
      </div>
    </div>
    <div class="footer">
      <div class="section">
        <p class="title">Product</p>
        <p class="desc">Web App</p>
      </div>
      <div class="section">
        <p class="title">Industry</p>
        <p class="desc">Trading</p>
      </div>
      <div class="section">
        <p class="title">Technology</p>
        <p class="desc">React
        </p>
      </div>
      <button class="project-btn" onclick="window.location.href='https://webtroniclabs.com/portfolio/'">Full Project<span class="material-symbols-outlined">
    trending_flat
    </span></button>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <img src="https://webtroniclabs.com/assets/img/carousel-img/carousel_Proflyt.webp" alt="Image 1">
      <div class="slide-text">
        <h3>PROLIFY <br> PROJECT
        </h3>
        <p class="desc-slider-final">ProFlyt is the first of its kind: the exclusive military aircrew scheduling platform designed for the US Air Force.</p>
      </div>
    </div>

    <div class="footer">
      <div class="section">
        <p class="title">Product</p>
        <p class="desc">Web App</p>
      </div>
      <div class="section">
        <p class="title">Industry</p>
        <p class="desc">Trading</p>
      </div>
      <div class="section">
        <p class="title">Technology</p>
        <p class="desc">React
        </p>
      </div>
      <button class="project-btn" onclick="window.location.href='https://webtroniclabs.com/portfolio/'">Full Project<span class="material-symbols-outlined">
    trending_flat
    </span></button>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <img src="https://webtroniclabs.com/assets/img/carousel-img/carousel_Neutrality.webp" alt="Image 1">
      <div class="slide-text">
        <h3>NEUTRALITY <br> PROJECT
        </h3>
        <p>A Revolutionary News Aggregator and News Market Research Tool.</p>
      </div>
    </div>

    <div class="footer">
      <div class="section">
        <p class="title">Product</p>
        <p class="desc">Web App</p>
      </div>
      <div class="section">
        <p class="title">Industry</p>
        <p class="desc">Communication</p>
      </div>
      <div class="section">
        <p class="title">Technology</p>
        <p class="desc">Angular / IA
        </p>
      </div>
      <button class="project-btn" onclick="window.location.href='https://webtroniclabs.com/portfolio/'">Full Project<span class="material-symbols-outlined">
    trending_flat
    </span></button>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <img src="https://webtroniclabs.com/assets/img/carousel-img/carousel_Neutrality.webp" alt="Image 1">
      <div class="slide-text">
        <h3>NEUTRALITY <br> PROJECT
        </h3>
        <p>A Revolutionary News Aggregator and News Market Research Tool.</p>
      </div>
    </div>

    <div class="footer">
      <div class="section">
        <p class="title">Product</p>
        <p class="desc">Web App</p>
      </div>
      <div class="section">
        <p class="title">Industry</p>
        <p class="desc">Communication</p>
      </div>
      <div class="section">
        <p class="title">Technology</p>
        <p class="desc">Angular / IA
        </p>
      </div>
      <button class="project-btn" onclick="window.location.href='https://webtroniclabs.com/portfolio/'">Full Project<span class="material-symbols-outlined">
    trending_flat
    </span></button>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <img src="https://webtroniclabs.com/assets/img/carousel-img/carousel_Neutrality.webp" alt="Image 1">
      <div class="slide-text">
        <h3>NEUTRALITY <br> PROJECT
        </h3>
        <p>A Revolutionary News Aggregator and News Market Research Tool.</p>
      </div>
    </div>

    <div class="footer">
      <div class="section">
        <p class="title">Product</p>
        <p class="desc">Web App</p>
      </div>
      <div class="section">
        <p class="title">Industry</p>
        <p class="desc">Communication</p>
      </div>
      <div class="section">
        <p class="title">Technology</p>
        <p class="desc">Angular / IA
        </p>
      </div>
      <button class="project-btn" onclick="window.location.href='https://webtroniclabs.com/portfolio/'">Full Project<span class="material-symbols-outlined">
    trending_flat
    </span></button>
    </div>
  </div>

</div>

<button class="prev">&#10094;</button>
<button class="next">&#10095;</button>

CSS

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.slider-container {
  display: none
}

.slide {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 4rem;
}

.content {
  display: flex;
  flex-direction: row-reverse;
}

.footer {
  background-color: black;
  color: white;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px
}

.footer p {
  align-self: center
}

.section {
  display: flex;
  gap: 20px
}

.title {
  color: #6B7280;
  font-size: 18px;
  font-family: 'Open Sans', Arial, sans-serif;
}

.desc-slider {
  color: black;
  font-family: 'Open Sans', Arial, sans-serif;
}

.slider-project-btn {
  background-color: #100E1C;
  border: 2px solid white;
  border-radius: 10px;
  color: white;
  padding: 15px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 20px;
  display: flex;
  gap: 10px
}

span-slide {
  color: #FE744F;
  font-size: 25px;
  font-weight: bold;
  align-self: center;
}

.slide img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 15px
}

span .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 900, 'GRAD' 0, 'opsz' 78
}

.slide-text {
  width: 50%;
  padding: 60px;
  padding-right: 100px;
  box-sizing: border-box;
  background-color: #F0F0FB;
  font-family: 'Open Sans', Arial, sans-serif;
  border-top-left-radius: 15px
}

.slide-text h3 {
  margin-top: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 28px;
}

.slide-text p {
  font-size: 1.5rem;
  font-family: 'Open Sans', Arial, sans-serif;
  padding-right: 1px
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  font-size: 24px;
  background-color: #ccc;
  border: none;
  color: #fff;
  selft-align: center;
  border-radius: 50%
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

@media (max-width: 900px) {
  .slide-text {
    font-size: 1rem;
  }
  .slide-text p {
    font-size: 10px;
    padding: 0px
  }
  .content {}
  .slide {
    overflow: hidden, display: none
  }
}

@media (max-width: 700px) {
  .slide-text {
    font-size: 1rem;
  }
  .slide-text p {
    font-size: 10px;
    padding: 0px
  }
  .slide {
    overflow: hidden
  }
}
}

JavaScript

var slideIndex = 0;
showSlide(slideIndex);

function showSlide(index) {
  var slides = document.getElementsByClassName("slide");
  var prev = document.querySelector(".prev");
  var next = document.querySelector(".next");

  if (index >= slides.length) {
    slideIndex = 0;
  } else if (index < 0) {
    slideIndex = slides.length - 1;
  } else {
    slideIndex = index;
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex].style.display = "flex";
}

function plusSlide(n) {
  showSlide(slideIndex + n);
}

var prev = document.querySelector(".prev");
prev.addEventListener("click", function() {
  plusSlide(-1);
});

var next = document.querySelector(".next");
next.addEventListener("click", function() {
  plusSlide(1);
});

问题原因

CSS媒体查询语法错误：在max-width:900px的媒体查询中，.slide的样式写为overflow: hidden, display: none——用逗号分隔属性属于语法错误，浏览器解析时会触发错误的display: none，导致所有幻灯片被隐藏，出现空白。
HTML属性未闭合：所有project-btn按钮的onclick属性缺少闭合引号，虽不直接引发空白，但会导致潜在的DOM解析问题。

修复方案

修正CSS媒体查询：将max-width:900px中的.slide样式改为：

.slide {
  overflow: hidden;
}

移除错误的display: none，保留溢出控制逻辑。
2. 闭合HTML属性：给所有按钮的onclick属性补充闭合引号，例如onclick="window.location.href='https://webtroniclabs.com/portfolio/'"。
3. 可选性能优化：缓存DOM元素，避免每次调用showSlide都重复查询DOM：

// 提前缓存DOM元素
const slides = document.getElementsByClassName("slide");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");

var slideIndex = 0;
showSlide(slideIndex);

function showSlide(index) {
  if (index >= slides.length) {
    slideIndex = 0;
  } else if (index < 0) {
    slideIndex = slides.length - 1;
  } else {
    slideIndex = index;
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex].style.display = "flex";
}

function plusSlide(n) {
  showSlide(slideIndex + n);
}

prevBtn.addEventListener("click", () => plusSlide(-1));
nextBtn.addEventListener("click", () => plusSlide(1));

修复后效果

修改后，轮播组件在所有屏幕尺寸下都能正常循环切换，不会出现空白状态；同时DOM操作性能也有小幅提升。

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

如何实现Slide轮播循环且避免显示空白Slide？

原代码 #

HTML

CSS

JavaScript

问题原因 #

修复方案 #

修复后效果 #

原代码

问题原因

修复方案

修复后效果