Bir wordpress teması yapıyorum ve yaptığım slider ekranın sağında ve solundaki yön tuşlarına basılarak içeriğin sağa ve ya sola hareket etmesini istiyorum.

Örnek bir fotoğraf https://i.stack.imgur.com/lpeKq.png (kırmızı yerlere yön okları gelecek)

Bu da kodum:

<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>

.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;
}

Şimdiden teşekkürler.