纯HTML无法实现图片轮播——它仅定义结构，无执行能力；data-slide、carousel-item等类名和属性需JavaScript解析响应，否则图片堆叠、按钮无反应、控制台报错“bootstrap is not defined”。
纯 HTML 模板无法实现图片轮播——它没有执行逻辑的能力，data-slide、carousel-item 这类 class 名本身不触发任何行为，必须靠 JS 解析并响应。
为什么直接套 Bootstrap class 不生效
常见现象是页面加载后所有图堆叠显示、左右箭头点击无反应、控制台报 Uncaught ReferenceError: bootstrap is not defined。根本原因是：Bootstrap 的 carousel 功能由 bootstrap.bundle.js（或单独引入 bootstrap.js + popper.js）提供，仅写 HTML 结构等于只画了按钮，没装电池。
- 未引入 JS 文件时，
data-bs-ride="carousel"被完全忽略 -
data-bs-slide-to="1"这类属性需要 JS 主动监听click事件并调用carousel.to() - 自动播放依赖
setInterval和 DOM 操作，HTML 无法自发启动
Swiper v11 ESM 方式零配置接入
比 Bootstrap 更轻、无需 jQuery、支持现代模块语法。只需三步：
- 在 HTML 中引入 Swiper 的 ESM CDN：
<script type="module" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.esm.browser.min.js"></script> - 结构保持语义清晰：
<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="1.jpg"></div></div></div> - JS 初始化只需一行：
new Swiper('.swiper', { autoplay: { delay: 3000 }, loop: true });
注意：Swiper v11 默认启用 modules 自动按需加载，loop: true 解决“上一张”越界问题，autoplay 内置暂停逻辑（hover 自动停）。
立即学习“前端免费学习笔记（深入）”；
原生 JS 封装最小可用轮播实例
若不想引第三方，又需要可复用、多实例支持的方案，关键不是写死定时器，而是封装成带状态的对象：
- 每个轮播容器用
data-carousel-id标识，避免全局变量冲突 - 切换函数内统一用
transform: translateX()，不操作display或margin-left - 暴露
pause()和resume()方法，供外部绑定mouseenter/touchstart - 手动切换后重置定时器：先
clearInterval(this.timer)，再this.timer = setInterval(...)
示例核心逻辑片段：
class SimpleCarousel {
constructor(el) {
this.el = el;
this.slides = el.querySelectorAll('.carousel-item');
this.currentIndex = 0;
this.timer = null;
this.init();
}
init() {
this.showSlide(this.currentIndex);
this.startTimer();
this.bindEvents();
}
showSlide(index) {
this.slides.forEach((s, i) => s.classList.toggle('active', i === index));
}
next() {
this.currentIndex = (this.currentIndex + 1) % this.slides.length;
this.showSlide(this.currentIndex);
}
startTimer() {
this.timer = setInterval(() => this.next(), 3000);
}
pause() {
clearInterval(this.timer);
}
bindEvents() {
this.el.addEventListener('mouseenter', () => this.pause());
this.el.addEventListener('mouseleave', () => this.startTimer());
}
}
图片加载失败导致轮播塌陷怎么兜底
本地正常、上线空白，大概率是某张图 404 或跨域被拒，<img> 加载失败后高度为 0，整个 .carousel-inner 高度坍缩。不能只靠 CSS 设 min-height——那会遮挡内容。
- 给每张图加
onerror处理：<img src="x.jpg" onerror="this.style.display='none'"> - 更稳妥的是用
img.complete判断后再激活 slide：if (!img.complete) return; - 配合
IntersectionObserver延迟加载：只对进入视口的图片发起请求，减少 404 累积影响
真正容易被忽略的点是：轮播组件初始化时，必须等所有图片至少触发一次 load 或 error 事件再开始计时，否则首屏可能直接跳过第一张图。
