Encontré este control deslizante en CodePen . Lo modifiqué para usar imágenes en el control deslizante con diferentes tamaños. El problema es que cuando todos los logotipos se deslizan, el control deslizante salta al primero. Esto no se ve bien. Quiero un efecto de repetición, que después del último logo aparezca el primero pero sin "salto".
¿Qué puedo hacer para solucionar mi problema?
body, html { height: 100%; background-color: white; } .container { overflow: hidden; } .container .slider { animation: slidein 30s linear infinite; white-space: nowrap; } .container .slider .logos { width: 100%; display: inline-block; margin: 0px 0; } .container .slider .logos .fab { width: calc(100% / 5); animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; } @keyframes slidein { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } <div class="container h-100"> <div class="row align-items-center h-100"> <div class="container rounded"> <h1 class="text-center">Featured in:</h1> <div class="slider"> <div class="logos"> <img src="https://via.placeholder.com/80"> <img src="https://via.placeholder.com/80"> <img src="https://via.placeholder.com/80"> <img src="https://via.placeholder.com/80"> </div> </div> </div> </div> </div>cambia esto:
.container { overflow: hidden; .slider { animation: slidein 30s linear infinite; white-space: nowrap; .logos { width: 100%; display: inline-block; margin: 0px 0; .fab { width: calc(100% / 5); animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; } } } }a esto:
.container { overflow: hidden; .slider { animation: slidein 30s linear infinite; white-space: nowrap; .logos { width: 100%; display: inline-block; margin: 0px 0; img { width: calc(100% / 5); animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; } } } }Cuando reemplazó los íconos de Font Awesome con imágenes, no actualizó el selector en el CSS para que coincida. Además, la cantidad de imágenes se utiliza en el cálculo del ancho de CSS. Necesitas actualizar eso.
Finalmente, en la demostración original, las imágenes se colocaron en el marcado dos veces . Necesitas hacer eso.
También eliminé la dependencia del marcado circundante para hacer que el control deslizante se desplegara de forma independiente.
.slider { white-space: nowrap; overflow: hidden; } .slider-inner { animation: slidein 30s linear infinite; } .slider .logos { width: 100%; display: inline-block; margin: 0px 0; } .slider .logos img { /* updated selector */ width: calc(100% / 4); /* must match the number of elements in your slider */ animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; } @keyframes slidein { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } <h1 class="text-center">Featured in:</h1> <div class="slider"> <div class="slider-inner"> <!-- must be included twice --> <div class="logos"> <img src="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200/ff0000"> </div> <div class="logos"> <img src="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200/ff0000"> </div> </div> </div>