当前位置：首页 > 文章列表 > 文章 > 前端 > 响应式轮播图布局教程详解

响应式轮播图布局教程详解

2025-10-04 20:03:41 0浏览收藏

1. 基础 HTML 结构

使用 radio inputs 和 label 标签 控制轮播切换，结构清晰且语义化：

2. 核心 CSS 布局

利用 Flexbox 实现横向滑动布局，并通过 :checked 状态控制当前显示的幻灯片。

.carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
height: 400px;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
input[name="slide"] {
display: none;
}
slide1:checked ~ .slides { transform: translateX(0); }
slide2:checked ~ .slides { transform: translateX(-100%); }
slide3:checked ~ .slides { transform: translateX(-200%); }

3. 添加指示器与响应式适配

底部圆点指示器帮助用户感知当前页，同时使用媒体查询优化小屏幕体验。

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.controls label {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
}
.controls label:hover {
background: #fff;
}
slide1:checked ~ .controls label[for="slide1"],
slide2:checked ~ .controls label[for="slide2"],
slide3:checked ~ .controls label[for="slide3"] {
background: #fff;
}
/ 移动端适配 /
@media (max-width: 768px) {
.slide {
height: 250px;
}
.controls {
bottom: 10px;
}
.controls label {
width: 10px;
height: 10px;
}
}