How to make scroll-snap to auto-scroll on a horizontal container in CSS?

Question

I made a slider with CSS using scroll-snap property. However I would like to have my slider auto-scroll every couple seconds but user should also be able to slide back and forth. So far, user can scroll back and forth but when I add an animation with @keyframes, user cannot go back in slider when @keyframes auto-scrolls forward.

I have a live demo of the project. I removed the auto-scrolling @keyframes animation. Right now, it's only scrollable by touch in mobile devices. Or you can scroll with your laptop's touchpad.

What I am trying to do is, I need to give my slider an auto-scrolling feature but I want my users to be able to go back and forth in the slider too. Any help in Javascript is appreciated. (This will probably be the only JS I will be using in my project.)

Here is the live project: https://sametweb.github.io/daimahaberv3/ My main slider is the one with biggest images, second line of images on the page.

I used this @keyframes animation but user cannot scroll the previous items in the slider.

  0%,
  100% {
    transform: translateX(0);
  }
  9% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-100%);
  }
  19% {
    transform: translateX(-100%);
  }
  20% {
    transform: translateX(-200%);
  }
  29% {
    transform: translateX(-200%);
  }
  30% {
    transform: translateX(-300%);
  }
  39% {
    transform: translateX(-300%);
  }
  40% {
    transform: translateX(-400%);
  }
  49% {
    transform: translateX(-400%);
  }
  50% {
    transform: translateX(-500%);
  }
  59% {
    transform: translateX(-500%);
  }
  60% {
    transform: translateX(-600%);
  }
  69% {
    transform: translateX(-600%);
  }
  70% {
    transform: translateX(-700%);
  }
  79% {
    transform: translateX(-700%);
  }
  80% {
    transform: translateX(-800%);
  }
  89% {
    transform: translateX(-800%);
  }
  90% {
    transform: translateX(-900%);
  }
  99% {
    transform: translateX(-900%);
  }
}

My slider container and slider item CSS:

.main-slider {
    .flex();
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    height: 100%;
    padding: 0 0 3rem 0;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    .item {
      position: relative;
      display: inline-block;
      flex: 0 0 85%;
      margin: 0 2rem 0 0;
      scroll-snap-align: center;
      scroll-behavior: smooth;
    }
  }

I need a solution either solving the problem with @keyframes swiping previous items or adding the auto-scrolling behavior with Javascript.