Отображение разных стрелочек в блоке в зависимости от элементов внутри при скролле

Есть задача. У нас блок, в нем находиться 6 карточек, есть скролл в этом блоке, чтоб мы могли пролистывать карточки. В самом начале у нас есть стрелка вправо, нужно: -чтобы когда долистали до последнего элемента, эта стрелка скрылась и появилась слева(типа, листайте теперь только влево(в обратную сторону)

• когда долистываем обратно до самого первого элемента, стрелку слева убираем и ставим ее в правую сторону( типа, листайте теперь только вправо) Не могу придумать, как адекватно отследить появление 1-го и последнего элемента для скрытия/появление нужных стрелок И нюанс в том, что пока 1 и последнего элемента не видно, чтоб две стрелки были видны( одна в правую сторону, другая в левую)

Upd. Стрелки несут декоративную функцию, не являются кликабельнимы или кнопками переключения. Просто показывают в какую сторону можно скролить

Пример кода схематически с блоками и стрелками https://jsfiddle.net/7jthb24z/1/

HTML:

<div class='parent'>
  <div class="arrow-left">
    arrow-left
  </div>
  <div class='child first'>
    text  first
  </div>
  <div class='child'>
    text
  </div>
  <div class='child'>
    text
  </div>
  <div class='child'>
    text
  </div>
  <div class='child'>
    text
  </div>
  <div class='child last'>
    text last
  </div>
  <div class="arrow-right">
    arrow-right
  </div>
</div>

CSS:

.parent {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    width: 853px;
    height: 250px;
    background: red;
    position: relative;
}

.child {
    display: inline-block;
    vertical-align: top;
    width: 674px;
    height: auto;
    background: blue;
    margin-right: 10px;
}

.arrow-left {
    position: fixed;
    display: block;
    background: yellow;
    width: 20px;
    height: 15px;
    left: 10px;
    margin-top: 100px;
}

.arrow-right{
    position: fixed;
    display: block;
    background: yellow;
    width: 20px;
    height: 15px;
    right: 50px;
    margin-top: 100px
}