How to create an infinite loop slider which slides automatically and stops when hovered over using CSS

Create the Slider in the template file

</div>
<section class="product">
<div class="product-feed">
<div class="shop-blvd-header-container">
<h1 class="shop-blved-text"> SHOP THE BLVD FEED</h1>
<h2 class="follow-us-text">FOLLOW US</h2>
</div>
<div class="shop-the-blvd-container">
<div class="blvd-shop-feed">
{{#each blvdSliderFeed}}
<a class="blvd-feed-card" id="{{itemnames}}" data-action="show-slider-popup">
<div class="blvd-feed-image-container">
<img class="blvd-feed-image" src="{{mainimage}}" alt="{{itemnames}}">
</div>
</a>
{{/each}}
{{#each blvdSliderFeed}}
<a class="blvd-feed-card" id="{{itemnames}}" data-action="show-slider-popup">
<div class="blvd-feed-image-container">
<img class="blvd-feed-image" src="{{mainimage}}" alt="{{itemnames}}">
</div>
</a>
{{/each}}
</div>
</div>
<div class="blvd-scroll-buttons">
<a class="blvd-scroll-button" title="Previous">
<img id="prevs-blvd-scroller"
src="/iloveblvdimages/Best-slider-arrow.png"
title="Previous" alt="Previous">
</a>
<a class="blvd-scroll-button" title="Next">
<img id="next-blvd-scroller"
src="/iloveblvdimages/Best-slider-arrow.png" alt="Next"
title="Next">
</a>
</div>
</div>
</div>
</section>
<section id="popup-scroller-inmodel-container" class="popup-scroller-inmodel-container">
<div id="popup-left-hand-side">
<a class="close-btn-container"><img src="/iloveblvdimages/Close-button.png" alt="Close"></a>
<div class="lower-container">
<div class="left-hand-side-img-container">
<img class="left-hand-side-producr-img">
<div class="background-blur"></div>
</div>
<div class="right-hand-side-img-container">
<div class="product-image-container">
<img class="right-hand-side-producr-img">
</div>
<div class="product-name-container"></div>
<a class="product-by-link">Buy Now</a>
</div>
</div>
</div>
</section>

Give CSS Animation for scrolling it in infinite loop

//Key animation for infinite roll
.shop-the-blvd-container .blvd-shop-feed{
  animation: scroll 30s linear infinite;
  width: calc(calc(16.66vw - 10px) * 20);
}
.shop-the-blvd-container .blvd-shop-feed:hover{
  animation-play-state: paused;
}
@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(calc(-1 * (16.66vw - 10px) * 10));
  }