Hola necesito ayuda , he creado un codigo donde hago un slider tipo netflix , mi pregunta es Como añado unos botones con flechas de navegación?? Me gustaria controlar cuantas casillas van pasando se que tengo que programar en js pero nose como inplementarlo a mi Codigo.

Dentro de cada DIV hay un shortcode que no podreis ver.. aqui os va toda la info.

Código CSS :

 #card_slider_5 {
  clear: both;
  overflow-y: hidden;
  overflow-x: scroll;
  width: 1350px;
  height: 280px;
  position: relative;
  padding-left: 40px;
  padding-top: 1px;
}

#card_slider_5::-webkit-scrollbar {
  height: 5px;
}

#card_slider_5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  border-radius: 0px;
}

#card_slider_5::-webkit-scrollbar-thumb {
  background-color: #5d646c;
  border-radius: 0px;
}

#card_track_5 {
  position: absolute;
  width: 2450px;
}

.subject_card_5 {
  border-radius: 1px;
  height: 350px;
  width: 400px;
  float: left;
  margin-right: 25px;
  display: inline;
}
.subject_card_5:hover {
 transform: scale(1.1)
}


.subject_card > p {
  padding-left: 1px;
  padding-right: 1px;
  margin-top: 1px;
  overflow: hidden;
  max-height: 10px;
}


Código HTML :

 <div id="card_slider_5">
  <div id="card_track_5">
      <div class="subject_card_5">
[pt_view id="e4ccea2m6o"] 
      </div>
      <div class="subject_card_5"> 
[pt_view id="47716c2aut"] 
      </div>
    </a>
      <div class="subject_card_5">
[pt_view id="f0fa77c5n4"]
      </div>
    </a>
      <div class="subject_card_5">
[pt_view id="2bbd57dw9v"]
      </div>
    </a>
      <div class="subject_card_5">
[pt_view id="15126b3q80"]
      </div>
    </a>
 </div>
</div>