如何用纯 CSS 实现可工作的图片轮播器（Slider）

5次阅读

本文详解纯 css 图片轮播器无法滑动的常见原因（尤其是 `~` 选择器使用错误），并提供结构正确、语义清晰、可直接运行的完整实现方案。

纯 css 轮播器（Slider）看似简单，实则对 html 结构与 CSS 选择器逻辑要求极为严格。你遇到的“滑块不移动”问题，根源在于 CSS 通用兄弟选择器 ~ 的作用范围被错误假设：它只能选中同一父容器内、位于目标元素之后的兄弟元素，而不能跨层级或跳过父级作用。

在你的原始代码中：

                     
   ...
    ...

.slide 元素与并非同级兄弟（它们分属 .slides 和 .content 两个不同子容器），因此 #slide1:checked ~ .s1 根本无法匹配到任何元素 —— 这就是轮播完全失效的根本原因。

✅ 正确做法是：所有和对应 .slide-container 必须平级、同属一个父容器（如

）

，并利用 +（相邻兄弟）或 ~（通用兄弟）精准控制后续内容的显示状态。

立即学习“前端免费学习笔记（深入）”；

以下是经过验证、结构健壮、支持自动焦点、悬停导航与底部指示点的纯 CSS 轮播器实现：

                                  @@##@@       
                ‹         ›       
     
                           @@##@@       
                ‹         ›       
     
                           @@##@@       
                ‹         ›       
     
                           @@##@@       
                ‹         ›

配套核心 CSS（精简关键逻辑）：

.slides {   position: relative;   height: 520px;   overflow: hidden;   list-style: none;   padding: 0;   margin: 0; }  .slide-container {   position: absolute;   top: 0; left: 0; width: 100%; height: 100%;   opacity: 0;   transition: opacity 0.7s ease-in-out; }  .slide-image img {   width: 100%; height: 100%; Object-fit: cover; }  /* ✅ 关键：利用 :checked + 相邻兄弟选择器激活当前幻灯片 */ input#img-1:checked + .slide-container, input#img-2:checked + .slide-container, input#img-3:checked + .slide-container, input#img-4:checked + .slide-container {   opacity: 1;   z-index: 10; }  /* 导航点高亮 */ .carousel-dots .carousel-dot {   display: inline-block;   width: 12px; height: 12px;   border-radius: 50%;   background: #fff;   opacity: 0.5;   margin: 0 6px;   cursor: pointer;   transition: opacity 0.3s; } input#img-1:checked ~ .carousel-dots .carousel-dot:nth-child(1), input#img-2:checked ~ .carousel-dots .carousel-dot:nth-child(2), input#img-3:checked ~ .carousel-dots .carousel-dot:nth-child(3), input#img-4:checked ~ .carousel-dots .carousel-dot:nth-child(4) {   opacity: 1; }

? 重要注意事项：