Aprenderemos cómo crear un slider infinito utilizando solo HTML y CSS. Este slider nos permitirá mostrar todo tipo de contenido de manera cíclica, proporcionando una experiencia fluida y atractiva para los usuarios.

<p>El dia de hoy vamos a crear un slider infinito de una manera muy sencilla. Solo necesitaremos HTML y CSS.</p><p>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:</p><pre><code class="language-xml">    
&lt;div class="slider-container"&gt;
   &lt;div class="slider"&gt;
      &lt;div class="slider-items" &gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-sva-scholarship-20.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://logos-world.net/wp-content/uploads/2023/07/Facebook-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/03/NASA-Logo-1975.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://miro.medium.com/v2/resize:fit:852/1*1ckgC6nPiidH23AUBxBS_A.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://freelogopng.com/images/all_img/1686390785Tesla-Name-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bitcoin_logo.svg/2560px-Bitcoin_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-sva-scholarship-20.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://logos-world.net/wp-content/uploads/2023/07/Facebook-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/03/NASA-Logo-1975.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://miro.medium.com/v2/resize:fit:852/1*1ckgC6nPiidH23AUBxBS_A.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://freelogopng.com/images/all_img/1686390785Tesla-Name-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bitcoin_logo.svg/2560px-Bitcoin_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;</code></pre><p>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:</p><pre><code class="language-css">.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));
    }
}
 </code></pre><p>3. El resultado sería similar a lo siguiente:</p><div class="iframe-module_lidiaEditorIframe__UCqeS"><iframe src="https://codepen.io/CodeChappie/embed/oNOMNWZ?default-tab=html%2Cresult" title="Infinite Carousel" frameborder="0" allowfullscreen="true"></iframe></div>

Contenido

Slide infinito con solo HTML y CSS

@codechappie