我正在创建一个投资组合网站，该网站在英雄图像下方有一个可过滤的无限墙画廊，当您单击时，该图像会向右滑动（再次单击时会滑回屏幕上）。我遇到了麻烦，让这个滑动图像正常工作。照片库将是另一天的头痛。

左侧会有一个小的右箭头按钮。为了使此滑块更明显，我想在您将鼠标悬停在此图像上时为图像的轻微左右反弹设置动画，然后当您单击箭头（或者可能更好地单击图片上的任何位置）时，它会滑落屏幕右侧，显示下面的照片库。然后，您可以使用右侧的另一个箭头按钮将此图像滑回图库。

我找到了一个最可行的解决方案，使用带有转换属性的标签输入复选框使其显示为默认值并通过箭头单击在屏幕外设置动画，但它向下滑动，而不是正确的。这有点不稳定，我觉得它可以在某种程度上简化。

我还尝试将输入从复选框更改为按钮并制作动画关键帧，但动画仅在刷新时播放，并且立即消失/重新出现，没有单击按钮的动画。不过，我可能只是针对错误的元素。

关于我的目标，这是一个非常粗略的想法，只是在 XD 中组合在一起。最终的设计会更令人愉快。我忘记了第二个屏幕上的箭头，但屏幕右侧会有一个箭头，可以将英雄图像滑回画廊。

如果这可以只用 HTML 和 CSS 来完成，那就太好了，但如果我需要使用 js 或 jQuery 来正确地做到这一点，那很好。

这就是我目前需要做一些认真的工作：

<section>
    <div class="pv-wrapper">
        <h1>PHOTO + VIDEO</h1>
        <div class="btn-container">
            <ul>
                <li class="automotive"><a href="automotive.html">Automotive</a></li>
                <li class="video"><a href="video.html">Video</a></li>
                <li class="portraits"><a href="portraits.html">Portraits</a></li>
                <li class="landscapes"><a href="landscapes.html">Landscapes</a></li>
            </ul>
        </div>
        <label class="slider">
            <img class="arrow" src="images/right-arrow.png">
            <input type="checkbox" name="">
            <div class="photo-slider"></div>
        </label>
    </div>
</section>
    .pv-wrapper {
      width: 100%;
      height: 750px;
      position: relative;
      border-left: 100px solid orange;
      color: rgba(0, 0, 0, 0.5);
      font-size: small;
      display: inline-block;
    }
    .pv-wrapper h1 {
      font-size: 50px;
      color: white;
      text-transform: uppercase;
      letter-spacing: 3px;
      position: absolute;
      bottom: 225px;
      left: -40px;
      margin-left: -30px;
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }


    .btn-container ul {
        display: inline-block;
        padding: 50px 0 0 50px;
        font-family: 'Poppins-Light';
        font-size: 40px;
        line-height: 120%;
    }

    .btn-container ul li a {
      text-decoration: none;
      color: black;
    }

    .btn-container ul li a:hover {
        color: #68C8E5;
        transition: 0.4s ease;
    }
    .slider {
        margin-left: -20px;
    }

    .arrow {
        width: 20px;
        margin-top: 90px;
    }

    .slider > input {
      display: none;
    }

    .slider > input:not(:checked) ~ .photo-slider {
      top: 100px !important;
    }

    .photo-slider {
      position: fixed;
      height: 750px;
      width: 100%;
      top: 100%;
      left: 100px;
      background: url(../images/rs3-bg.jpg);
      background-size: cover;
      background-position: 75% 50%;
      transition: 0.6s;
    }


  [1]: https://i.stack.imgur.com/nob93.jpg