Responsive Infinite Scrolling Image Banner Css Only

A modern take on a row of images that loop infinitely and breaks down gracefully on smaller viewports. No javascript required.

Copy HTML code and paste into your html file:

<div class="main-infinite-slider">
  
  <div class="inner-slider">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/102">
    <img src="https://picsum.photos/103">
    <img src="https://picsum.photos/104">
    <img src="https://picsum.photos/105">
    <img src="https://picsum.photos/106">
    <img src="https://picsum.photos/107">
    <img src="https://picsum.photos/108">
   </div>
  
  <div class="inner-slider">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/102">
    <img src="https://picsum.photos/103">
    <img src="https://picsum.photos/104">
    <img src="https://picsum.photos/105">
    <img src="https://picsum.photos/106">
    <img src="https://picsum.photos/107">
    <img src="https://picsum.photos/108">
  </div>
   
</div>

Copy CSS code and paste into your CSS file:

.main-infinite-slider {
  --image-size: 100px;
  border: 1px solid #575757;
  padding: 20px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
}
.main-infinite-slider:hover div.inner-slider {
  animation-play-state: paused;
}
.main-infinite-slider div.inner-slider {
  display: flex;
  position: relative;
  animation: marquee 5s linear infinite;
  justify-content: space-around;
}
.main-infinite-slider img {
  display: block;
  min-width: var(--image-size);
  height: var(--image-size);
  margin: 0 1vw;
}
.main-infinite-slider:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to right, white, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 0) calc(100% - 80px), white);
}
@media (max-width: 900px) {
  .main-infinite-slider {
    --image-size: 50px;
    --image-size: min(max(50px, 10vw), 100px);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}