El dia de hoy vamos a crear un slider infinito de una manera muy sencilla. Solo necesitaremos HTML y CSS.

1. Primero, vamos a empezar a maquetar nuestro slider. Tendremos un contenedor principal llamado 'slider-container'. Luego, anidaremos un contenedor con una clase llamada 'slider' y, por último, colocaremos los 'slider-items' y dentro todas las slides que necesites o directamente las imágenes. Es muy importante recordar que nuestro slider debe ocupar toda la pantalla o hacer que las imágenes cubran la parte que deseamos. Si tenemos 5 imágenes, lo que vamos a hacer es duplicar esas imágenes y vamos a tener 10. En mi caso, usaré 8 imágenes, por lo que al final tendré 16 imágenes, como se puede apreciar a continuación:

    <div class="slider-container">
			<div class="slider">
				<div class="slider-items" >
					<div class="slide">
						<img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-sva-scholarship-20.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://logos-world.net/wp-content/uploads/2023/07/Facebook-Logo.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png"
							alt="" />
					</div>

					<div class="slide">
						<img src="https://1000logos.net/wp-content/uploads/2017/03/NASA-Logo-1975.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://miro.medium.com/v2/resize:fit:852/1*1ckgC6nPiidH23AUBxBS_A.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://freelogopng.com/images/all_img/1686390785Tesla-Name-Logo.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bitcoin_logo.svg/2560px-Bitcoin_logo.svg.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-sva-scholarship-20.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://logos-world.net/wp-content/uploads/2023/07/Facebook-Logo.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png"
							alt="" />
					</div>

					<div class="slide">
						<img src="https://1000logos.net/wp-content/uploads/2017/03/NASA-Logo-1975.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://miro.medium.com/v2/resize:fit:852/1*1ckgC6nPiidH23AUBxBS_A.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://freelogopng.com/images/all_img/1686390785Tesla-Name-Logo.png"
							alt="" />
					</div>
					<div class="slide">
						<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bitcoin_logo.svg/2560px-Bitcoin_logo.svg.png"
							alt="" />
					</div>
				</div>
			</div>
		</div>

2. Luego, los estilos deben ser similares a los que se muestran a continuación. Recuerda que es importante tener un ancho fijo para los slides (en este caso 350px) y recordar el número de slides (16 en esta ocasión) y la mitad de slides (8 imágenes). Con esta información, haremos los cálculos y la ilusión de slider infinito:

.slider {
  margin: 0 auto;
  position: relative;
  width: 100vw;
	height: 150px;
  display: grid;
  place-items: center;
	overflow:hidden;
}

/* REMEMBER: 350px is the width of slide if you change this, do it everywhere this size it's similar.
* 16 is the number of items
*/
.slider-items {
  display: flex;
	align-items: center;
  gap: 0px;
  width: calc(350px * 16);
	height: 100%;
  animation: scrolling 40s linear infinite;
}

.slide {
  width: 350px;
  display: flex;
  align-items: center;
  position: relative;
}

.slide img {
  width: 220px;
  height: auto;
}

/**
* 350px is the width of slide and 8 is the half of items and it's negative 
* for left to right animation
*/
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(350px * -8));
  }
}

3. El resultado sería similar a lo siguiente:

Slide infinito con solo HTML y CSS

Creado por @codechappie