Sí, hay muchas maneras de crear un control deslizante de imágenes usando html y css puro.
Código HTML:
- ¿Qué debo hacer para mejorar mi sitio web http://www.bloggerspick.com?
- ¿Cómo convertirme en diseñador y desarrollador web independiente si conozco HTML5 básico, CSS, un poco de JavaScript y Bootstrap? ¿Es esto lo suficientemente adecuado para convertirse en desarrollador web?
- ¿Cuál es el motor de plantillas de JavaScript más fácil de aprender para un desarrollo rápido?
- ¿Por qué rgb ('+ x +', '+ y +', '+ z +') funciona en javascript y no en rgb (x, y, z)?
- ¿Para qué se utilizan las API de JavaScript?
Código CSS:
div {
ancho: 800px;
altura: 250 px;
color de fondo: gris ;;
margen: auto;
imagen de fondo: url (“http://imgur.com/download/OtK7XDW”);
repetición de fondo: sin repetición;
nombre-animación: diapositiva;
duración de la animación: 13s;
dirección de animación: normal;
función de sincronización de animación: facilidad;
animación-recuento-iteración: infinito;
}
/ * animación * /
@keyframes slide {
0% {background-position: 0 0;}
16.66% {posición de fondo: 0 0;}
33.32% {background-position: -800px 0;}
49.98% {background-position: -800px 0;}
66.64% {background-position: -1600px 0;}
83.30% {background-position: -1600px 0;}
100% {posición de fondo: 0 0;}
}
Pasos:
- Establezca un ancho y una altura fijos para las diapositivas.
- Aquí he colocado todas las imágenes en una sola imagen, pero también puede usar diferentes div para este propósito.
- En la animación CSS, establezca el período de tiempo para que se ejecute toda la presentación de diapositivas. Para mis tres imágenes utilicé 13 segundos. Si tiene más imágenes, deberá aumentar esto según sea necesario.
Conclusión:
Finalmente, le sugiero que vea mi “PEN” para obtener una descripción completa del código.
Enlace: Presentación de diapositivas HTML y CSS
