你不仅需要html和css，还需要一点js。非常简单的滚动，你可以在2分钟内完成：

const wrapper = document.querySelector(".wrapper");
const left = document.querySelector(".left");
const right = document.querySelector(".right");

left.addEventListener("click", () => {
  wrapper.scrollBy({ left: -100, behavior: "smooth" });
});

right.addEventListener("click", () => {
  wrapper.scrollBy({ left: 100, behavior: "smooth" });
});

.wrapper {
  margin: auto;
  overflow-x: scroll;
  max-width: 500px;
}

.image-group {
  display: flex;
  flex-wrap: wrap;
  width: 1500px;
  gap: 20px;
}

<div id="app">
  <div class="wrapper">
    <div class="image-group">
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
      <img src="https://cataas.com/cat?width=300&height=300" />
  </div>
</div>

<button class="left">left</button>
<button class="right">right</button>

或者对于某些高级变体，您可以使用现成的解决方案https://freefrontend.com/javascript-carousels/