En este artículo, sabremos cómo crear la presentación de diapositivas usando HTML y CSS. Una presentación de diapositivas se puede utilizar para mostrar texto o imágenes que se desplazan continuamente de una diapositiva a otra para mostrar su contenido. Este artículo muestra un método para crear una presentación de diapositivas con el uso exclusivo de HTML y CSS . Consume menos memoria del navegador y requiere menos poder de cómputo ya que no hay JavaScript involucrado. Los controles deslizantes basados en JavaScript hacen que la página web sea más lenta y tampoco funcionan si el usuario ha desactivado JavaScript en el navegador.
Utiliza el enfoque de usar fotogramas clave de animación para desplazarse por cada una de las diapositivas modificando cada una de las propiedades del margen izquierdo de la diapositiva durante la animación. El tipo de animación se puede especificar para que las diapositivas se puedan animar según la duración y el efecto requeridos. Dividiremos la tarea en dos secciones, es decir, en la primera, decoraremos la estructura usando solo HTML y en la segunda sección, decoraremos la estructura usando CSS.
Enfoque: para crear la presentación de diapositivas o el carrusel, seguiremos el siguiente enfoque.
- Para mostrar el contenido de texto en cada diapositiva, hemos definido una sección div separada que llevará el contenido de cada diapositiva.
- Tenemos la clase slide-wrapper para transportar todo el marco de la diapositiva que facilita la implementación del mismo efecto de animación, así como otras propiedades CSS para cada diapositiva.
- Hemos utilizado la propiedad de desbordamiento para que recorte el contenido adicional y el resto del contenido sea invisible si el contenido de un elemento es demasiado grande para caber en el área especificada. La propiedad float se utiliza para alinear el contenido a la izquierda.
- Hemos utilizado el selector :nth-child() para aplicar el color de fondo que coincidirá con los elementos en función de su posición en un grupo de hermanos. Coincide con cada elemento que es el n-ésimo hijo.
- Para definir la animación de la presentación de diapositivas, se usará la propiedad de fotogramas clave para desplazarse por cada una de las diapositivas modificando la propiedad margin-left para cada una de las diapositivas durante la animación.
Primera sección: esta sección contiene la parte HTML de la página. Las diapositivas a mostrar se definen con su correspondiente texto.
HTML
<html> <head> <title>HTML and CSS Slideshow</title> </head> <body> <!-- Define the slideshow container --> <div id="slideshow"> <div class="slide-wrapper"> <!-- Define each of the slides and write the content --> <div class="slide"> <h1 class="slide-number"> GeeksforGeeks </h1> </div> <div class="slide"> <h1 class="slide-number"> A computer science portal </h1> </div> <div class="slide"> <h1 class="slide-number"> This is an example of </h1> </div> <div class="slide"> <h1 class="slide-number"> Slideshow with HTML and CSS only </h1> </div> </div> </div> </body> </html>
Segunda Sección: Esta sección consta de todo el estilo que se usaría para hacer la presentación de diapositivas. La animación que se usará para mover cada una de las diapositivas se define configurando la propiedad margin-left según sea necesario para cada diapositiva. Esto le da una apariencia de transición suave entre cada una de las diapositivas.
CSS
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
}
/* Styling the area of the slides */
#slideshow {
overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}
/* Style each of the sides
with a fixed width and height */
.slide {
float: left;
height: 510px;
width: 728px;
}
/* Add animation to the slides */
.slide-wrapper {
/* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
animation: slide 10s ease infinite;
}
/* Set the background color
of each of the slides */
.slide:nth-child(1) {
background: green;
}
.slide:nth-child(2) {
background: pink;
}
.slide:nth-child(3) {
background: red;
}
.slide:nth-child(4) {
background: yellow;
}
/* Define the animation
for the slideshow */
@keyframes slide {
/* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
}
Código completo: aquí, combinaremos las dos secciones anteriores en una sola para lograr la tarea mencionada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML and CSS Slideshow</title>
<style>
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
}
/* Styling the area of the slides */
#slideshow {
overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}
/* Style each of the sides
with a fixed width and height */
.slide {
float: left;
height: 510px;
width: 728px;
}
/* Add animation to the slides */
.slide-wrapper {
/* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
animation: slide 10s ease infinite;
}
/* Set the background color
of each of the slides */
.slide:nth-child(1) {
background: green;
}
.slide:nth-child(2) {
background: pink;
}
.slide:nth-child(3) {
background: red;
}
.slide:nth-child(4) {
background: yellow;
}
/* Define the animation
for the slideshow */
@keyframes slide {
/* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
}
</style>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
GeeksforGeeks
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
A computer science portal
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
This is an example of
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
Slideshow with HTML and CSS only
</h1>
</div>
</div>
</div>
</body>
</html>
Producción:
Presentación de diapositivas usando HTML y CSS