HTML/CSS滑块无法正常运行，请求技术指导

核心问题分析 #

1. HTML结构错误：所有slide元素必须嵌套在.slides容器内，否则CSS的兄弟选择器无法关联单选按钮和幻灯片。
2. 属性语法错误：第一个slide的s1是无效属性，应改为class属性值。
3. CSS选择器失效：单选按钮和幻灯片不在同一层级，导致~兄弟选择器无法匹配目标元素。
4. 容器宽度未设置：.slides的宽度被注释，无法让幻灯片横向排列。
5. 缺少完整的幻灯片切换规则：仅写了slide1和slide2的CSS规则，slide3、slide4无对应逻辑。

修正后的完整代码 #

HTML代码

<div class="content">
    <div class="slides">
        <input type="radio" name="slide" id="slide1" checked>
        <input type="radio" name="slide" id="slide2">
        <input type="radio" name="slide" id="slide3">
        <input type="radio" name="slide" id="slide4">
        
        <div class="slide s1">
            <img src="img/XU/Xu1a.jpg" alt="Robaleiro Xu">
        </div>
        <div class="slide">
            <img src="img/XU/Xu2a.jpg" alt="Robaleiro Xu">    
        </div>
        <div class="slide">
            <img src="img/XU/Xu3a.jpg" alt="Robaleiro Xu">  
        </div>
        <div class="slide">
            <img src="img/XU/Xu5a.jpg" alt="Robaleiro Xu">  
        </div>
    </div>

    <div class="navigation"> 
        <label class="bar" for="slide1"></label>
        <label class="bar" for="slide2"></label>
        <label class="bar" for="slide3"></label>
        <label class="bar" for="slide4"></label>
    </div>
</div>

CSS代码

.content {
    height: 520px;
    width: 935px;
    overflow: hidden; 
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -25%);
}

.navigation {
    position: absolute; 
    bottom: 20px; 
    left: 50%; 
    transform: translate(-50%); 
    display: flex;
}

.bar {
    width: 70px; 
    height: 17px; 
    border: 2px solid white;
    margin: 6px; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.4s;
}

.bar:hover { 
    background-color: white;
}

.slides {
    display: flex;
    width: 400%; /* 4张幻灯片，每张占100%容器宽度，总宽度设为400% */
    height: 100%;
} 
.slide {
    width: 25%; /* 4张幻灯片均分400%宽度，每张占25% */
    transition: .6s; 
}   
.slide img {
    width: 100%; 
    height: 100%;
    object-fit: cover; /* 确保图片铺满容器不变形 */
}

#slide1:checked ~ .s1 { margin-left: 0; }
#slide2:checked ~ .s1 { margin-left: -25%; }
#slide3:checked ~ .s1 { margin-left: -50%; }
#slide4:checked ~ .s1 { margin-left: -75%; }

关键调整说明 #

• 将所有.slide元素移入.slides容器，确保单选按钮和幻灯片处于同一层级，使兄弟选择器生效。
• 修正第一个幻灯片的class属性为slide s1，作为切换的基准元素。
• 设置.slides宽度为400%，对应4张幻灯片，每张.slide宽度设为25%，保证横向排列正确。
• 补充slide3和slide4的切换CSS规则，完成完整的幻灯片切换逻辑。
• 添加object-fit: cover确保图片自适应容器尺寸，避免拉伸变形。

内容的提问来源于stack exchange，提问作者alejandro carnero