纯CSS图片轮播点击箭头无滑动问题的修复咨询

问题描述 #

希望通过纯CSS实现点击两侧箭头切换图片的轮播功能，但CSS中transform相关样式未生效，图片无法滑动。

错误原因分析 #

1. CSS语法错误：所有transform属性后都多了一个多余的冒号（transform: :translateX(...)），浏览器会将这种语法错误的样式视为无效，直接忽略。
2. 轮播逻辑错误：原代码对每个<li>单独应用transform，这会导致每个列表项各自位移，无法实现整个图片列表的滑动效果，正确的做法应该是对整个.slidelist容器应用transform。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>프로토타입</title>
    <style>
        body{
            margin: 0;   
        }

        .event_slide input[id*=slide]{
            display: none;
        }
        .event_slide .slidewrap{
            max-width: 1200px ;
            margin:0 auto;
            overflow: hidden;
        }
        .event_slide .slidelist{
            white-space:nowrap;
            font-size: 0; 
            transition:all .5s; /* 将过渡效果移到容器上 */
        }
        .event_slide .slidelist > li {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
        }
        .event_slide .slidelist > li > a {
            display:block;
            position:relative;
        }
        .event_slide .slidelist > li > a img {
            width: 100%;
        } 
        .event_slide .slidelist label {
            position: absolute;
            z-index: 10;
            top: 50%;
            transform: translateY(-50%);
            padding: 50px;
            cursor: pointer; 
        }   
        .event_slide .slidelist .left {
            left: 30px;
            background: url(images/index/header02/slide/left.png) center center / 100% no-repeat;
        }
        .event_slide .slidelist .right {
            right : 30px;
            background: url(images/index/header02/slide/right.png) center center / 100% no-repeat;
        }
        /* 修改选择器，对.slidelist应用transform，同时修正语法错误 */
        .event_slide [id="slide01"]:checked ~ .slidewrap .slidelist {transform: translateX(0%);}
        .event_slide [id="slide02"]:checked ~ .slidewrap .slidelist {transform: translateX(-100%);}
        .event_slide [id="slide03"]:checked ~ .slidewrap .slidelist {transform: translateX(-200%);}
        .event_slide [id="slide04"]:checked ~ .slidewrap .slidelist {transform: translateX(-300%);}
    </style>
</head>
<body>
    <div class="event_slide">
        <input type="radio" name="slide" id="slide01" checked>
        <input type="radio" name="slide" id="slide02">
        <input type="radio" name="slide" id="slide03">
        <input type="radio" name="slide" id="slide04">
    <div class="slidewrap">
        <ul class="slidelist">
            <li>
                <a>
                    <label for="slide04" class="left"></label>
                    <img src="images/index/header02/slide/slide01.png">
                    <label for="slide02" class="right"></label>
                </a>
            </li>
            <li>
                <a>
                    <label for="slide01" class="left"></label>
                    <img src="images/index/header02/slide/slide02.png">
                    <label for="slide03" class="right"></label>
                </a>
            </li>
            <li>
                <a>
                    <label for="slide02" class="left"></label>
                    <img src="images/index/header02/slide/slide03.png">
                    <label for="slide04" class="right"></label>
                </a>
            </li>
            <li>
                <a>
                    <label for="slide03" class="left"></label>
                    <img src="images/index/header02/slide/slide04.png">
                    <label for="slide01" class="right"></label>
                </a>
            </li>
        </ul>
    </div><!--slidewrap end-->
    </div><!--event_slide end-->
</body>
</html>

关键修复点说明 #

• 移除transform属性中多余的冒号，修正CSS语法错误。
• 将transition过渡效果从<li>移到.slidelist容器上，确保滑动动画作用在整个列表。
• 修改选择器目标，将transform应用到.slidelist而非每个<li>，实现整个图片列表的滑动切换。

内容的提问来源于stack exchange，提问作者애니액트