javascript - 如何使用标签进行水平移动？

Question

我正在研究一个 Wordpresss 主题，我想制作这样一个滑块，但我无法使按键正常工作。照片中的红色方块将有左右方向的箭头。按下时，里面的 div 会向左或向右移动。我怎样才能制作这个动画？这可以仅使用 HTML 和 CSS 来完成吗？从现在开始谢谢你。

这是代码：

.container {
  position: relative;
  max-width: 1240px;
  margin: auto;
}

.left-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 10;
  background: red;
  height: 100px;
  width: 100px;
}

.right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 10;
  background: red;
  height: 100px;
  width: 100px;
}

.left-arrow a,
.right-arrow a {
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.content {
  display: flex;
  flex-wrap: nowrap;
}

.content .card {
  width: 224px;
  height: 205px;
  background-color: #212529;
  margin: 0 2rem;
  padding: 2rem;
}

.card p {
  color: white;
}

<div class="container">
  <div class="left-arrow">
    <a href="#"></a>
  </div>
  <div class="content">
    <div class="card" id="card-id-1">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-2">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-3">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-4">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-5">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-6">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-7">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-8">
      <p>Card Content</p>
    </div>
    <div class="card" id="card-id-9">
      <p>Card Content</p>
    </div>
  </div>
  <div class="right-arrow">
    <a href="#"></a>
  </div>
</div>

标签： javascripthtmlcsswordpresswordpress-theming