纯HTML/CSS图片滑块仅支持左滑，右滑功能异常求助

问题背景 #

用纯HTML/CSS实现了基于URL hash和:target选择器的图片滑块，但目前仅支持从左向右滑动，尝试将transform: translateX(-100%)改为transform: translateX(100%)后，反向滑动表现异常。

问题根源 #

当前代码中，所有被:target选中的slide都执行同一套左滑入动画，没有区分切换方向；同时not(:target)的元素仅固定z-index，缺少对应方向的滑出动画，导致反向切换时视觉逻辑混乱。

修复方案 #

通过相邻兄弟选择器判断slide的切换方向，为正向（如slide1→slide2）和反向（如slide2→slide1）切换分别设置不同的滑入/滑出动画：

修改后的CSS代码 #

.slides {
    height: 70vh;
    width: 30vh;
    margin: auto;
    border: 2px solid red;
    overflow: hidden;
    position: relative;
    list-style: none;
    padding: 0;
}

.slides li {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    transition: z-index 0s 0.5s; /* 延迟z-index变化，保证动画完成 */
}

.slides li img {
    width: 100%;
    height: 100%;
}

.thumbnails {
    display: flex;
    width: 30vh;
    margin: auto;
    list-style: none;
    padding: 0;
}

.thumbnails li {
    flex: auto;
}

.thumbnails li img {
    width: 100%;
}

/* 正向切换：从左滑入 */
.slides li:target {
    z-index: 3;
    animation: slideInLeft 0.5s forwards;
}

/* 正向切换时，前一个slide滑出到右侧 */
.slides li:target + li:not(:target) {
    z-index: 2;
    animation: slideOutRight 0.5s forwards;
}

/* 反向切换：从右滑入 */
.slides li:not(:target) ~ li:target {
    z-index: 3;
    animation: slideInRight 0.5s forwards;
}

/* 反向切换时，后一个slide滑出到左侧 */
.slides li:target ~ li:not(:target) {
    z-index: 2;
    animation: slideOutLeft 0.5s forwards;
}

/* 重置非target元素的动画和z-index */
.slides li:not(:target) {
    z-index: 1;
    animation: none;
}

/* 左滑入动画 */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* 右滑出动画 */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* 右滑入动画 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* 左滑出动画 */
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

HTML代码保持不变 #

<div class="container">
    <ul class="slides">
        <li id="slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" alt="" /></li>
        <li id="slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" alt="" /></li>
        <li id="slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" alt="" /></li>
        <li id="slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" alt="" /></li>
        <li id="slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" alt="" /></li>
    </ul>

    <ul class="thumbnails">
        <li>
            <a href="#slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" /></a>
        </li>
        <li>
            <a href="#slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" /></a>
        </li>
        <li>
            <a href="#slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" /></a>
        </li>
        <li>
            <a href="#slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" /></a>
        </li>
        <li>
            <a href="#slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" /></a>
        </li>
    </ul>
</div>

关键改进点 #

• 用相邻兄弟选择器（+、~）区分切换方向，为不同方向分配对应的滑入/滑出动画
• 添加transition: z-index 0s 0.5s延迟z-index变化，确保动画完成后再调整层级，避免视觉闪烁
• 拆分动画为四个独立的keyframes，分别对应左滑入、右滑出、右滑入、左滑出，逻辑更清晰

内容的提问来源于stack exchange，提问作者gaurav koshyari