'Continuously scrolling slider with drag functionality

I'm trying to make a continuous slider, that scrolls infinitely with no easing from right to left with no gap at the end of the div, with a possibility of grabbing it and dragging it left or right. I had no luck with Swiper (freeMode, loop and autoplay props don't really do the trick) and OwlCarousel. Maybe I could add some JS or is there any library that somebody maybe used that could come in handy?

HTML
 <div class="container-fluid">
  <div class="continuous-slider">
    <span class="continuous-slide">Lorem ipsum dolor sit ament... and a lot of text that's wider than 200px </span>
    <span class="continuous-slide">Lorem ipsum dolor sit ament... and a lot of text that's wider than 200px </span>
  </div>
</div>

CSS
.container-fluid {
  width: 200px;
  overflow: hidden;
}
.continuous-slider {
  display: flex;
  cursor: grab;
  transform: translateX(0);
  animation: tdkSlider 50s infinite linear;
}

@keyframes tdkSlider {
  from {
    transform: translateX(0%);
  }
to {
  transform: translateX(-200%);
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source