En diseño web, un carrusel es una presentación de diapositivas que presenta una serie de contenido. Suena inofensivo, ¿verdad? Pero a algunos diseñadores web les encantan los controles deslizantes de carrusel y otros los desprecian.
Esto se debe a que, cuando se hace correctamente, el control deslizante del carrusel puede organizar de manera eficaz el contenido en ráfaga o varias piezas separadas de contenido, como imágenes. También puede aumentar la participación y brindar una mejor experiencia de usuario al permitir que los visitantes naveguen por ese contenido de forma rápida y sencilla, especialmente en dispositivos móviles.
Eche un vistazo a este increíble control deslizante de carrusel que muestra categorías populares en lado de la moda ALIÉTTEpor ejemplo.
Sin embargo, los controles deslizantes de carrusel mal hechos hacen más daño que bien. Por ejemplo, un control deslizante automático puede distraer más que informar. Un control deslizante con animaciones cursis puede hacer que su sitio web se vea menos profesional. Y un carrusel mal diseñado puede pasarse por alto por completo, lo que oculta información sobre otras diapositivas de los visitantes.
Para evitar estos peligros potenciales y solo cosechar los beneficios del control deslizante del carrusel, asegúrese de comprender lo que se debe y lo que no se debe hacer con este elemento de diseño. La gran tarea es crear un control deslizante de carrusel teniendo en cuenta la accesibilidad. Aquí hay dos formas en que puede hacer esto en su sitio: usando Bootstrap CSS o usando «CSS puro» (es decir, sin JavaScript). Entonces seguiremos adelante como crear un carrusel de imagenes.
carrusel de CSS
Hay dos formas de crear un control deslizante de carrusel para su sitio web. Puedes construirlo desde cero usando solo HTML y CSS. O puede usar Bootstrap CSS, que es un marco que ofrece componentes prediseñados, incluidos carruseles, para acelerar el proceso de creación de código.
A continuación, veremos cada proceso en detalle y lo guiaremos a través de un ejemplo de construcción de un carrusel para cada uno.
Cómo hacer un carrusel simple en Bootstrap CSS
Con Bootstrap, puede crear un carrusel simple usando solo HTML. Para mostrarle cómo, cubriremos el proceso de creación de un carrusel con diapositivas y controles.
1. Cree div principal con atributos de identificación y clase.
Comencemos con el elemento padre. Necesita un elemento div para comenzar. Asegúrese de darle un nombre de identificación único para que pueda aplicar controles opcionales más adelante. Esto es especialmente cierto si agrega varios carruseles en una página. Llamaré a este ejemplo «SimpleCarouselExample».
A continuación, desea definir el elemento con la clase de diapositiva .carousel y agregar el atributo data-ride = «carrusel» para que el carrusel comience su animación en la carga de la página sin ninguna otra acción. Así es como se ve nuestro código HTML hasta ahora:
<div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel">
</div>
2. Agregue elementos de imagen dentro del elemento div principal.
Ahora necesitamos poner los elementos secundarios dentro de este elemento principal.
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
Tenga en cuenta la presencia del bloque .di .w-100. Estas clases evitan la alineación predeterminada de la imagen del navegador. Más específicamente, .d-block es mostrar el valor de la propiedad en Bootstrap lo que hace que el elemento sea visible en todos los tamaños de pantalla, y el .w-100 es valor de utilidad de ancho esto hace que el artículo sea 100% tan ancho como su contenedor.
3. Envuelva cada imagen en un div.
Necesitamos envolver cada una de estas imágenes en un elemento.
<div class="carousel-item active">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
Nota: La clase .active debe agregarse a una de las diapositivas. Sin esta clase, el carrusel no será visible.
4. Envuelva todos estos elementos div internos en otro elemento div.
Voy a envolver todos estos elementos del carrusel en un elemento
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
<div class="carousel-item">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
<div class="carousel-item">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
</div>
5. Agregue controles con atributos ARIA.
Ahora que logré crear un carrusel de solo diapositivas, es hora de agregar los controles anterior y siguiente. Para crearlos, añade dos elementos. y defínalos con las clases .carousel-control-prev-icon y .carousel-control-next-icon, respectivamente.
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
prestar atención a Atributos ARIA. Los explicaremos en un momento, pero primero debemos averiguar qué agregar para que el diseño sea accesible.
6. Agregue intervalos para que los controles estén disponibles para los lectores de pantalla.
Algunos usuarios, especialmente aquellos que utilizan lectores de pantalla, no podrán ver ni hacer clic en los iconos anterior y siguiente. Por lo tanto, debe agregar dos elementos de intervalo adicionales que definan cada icono como «Anterior» y «Siguiente». Definirlos con Clase solo .sr para mantener el texto oculto en todos los dispositivos, excepto en los lectores de pantalla. Ahora debería tener dos pares de tramos que se vean así:
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
Un atributo oculto en el aria le dice a las tecnologías de asistencia que se salten el DOM del carrusel, de modo que solo lean «Anterior» o «Siguiente» cuando revisen ese código.
7. Envuelva los controles en las piezas de anclaje.
Ahora que hemos creado los íconos (y el texto alternativo), necesitamos envolver los pares en elementos. . Defina cada elemento con .carousel-control prev y .carousel-control-next, respectivamente.
También debe nombrar un[href]s con exactamente el mismo identificador que el elemento del carrusel. En Bootstrap, los controles y punteros deben tener un atributo de destino de datos (o href para enlaces) que coincida con el identificador del elemento .carousel. Asignas a cada uno la función de un botón y un atributo de diapositiva de datos establecido en «anterior» y «siguiente» respectivamente. Así es como se verá el código HTML:
<a class="carousel-control-prev" href="#SimpleCarouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#SimpleCarouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
8. Combina todo el código.
En conclusión, aquí está el código HTML necesario para crear un carrusel simple con diapositivas y controles:
<div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
<div class="carousel-item">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
<div class="carousel-item">
<img src="https://blog.hubspot.com/website/..." class="d-block w-100" alt="https://blog.hubspot.com/website/...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Así es como se verá y se comportará el carrusel en la parte frontal de su sitio web. Tenga en cuenta que pasa automáticamente a la siguiente diapositiva si no hago nada, pero me permitirá avanzar y retroceder cuando use los controles.
Para otros ejemplos del carrusel ver Documentación oficial de Bootstrap.
Control deslizante de carrusel de CSS puro
Antes de sumergirse en la compilación de muestra, es importante comprender que la creación de un control deslizante de carrusel de CSS puro también requiere HTML. Después de todo, CSS es un lenguaje de estilo, por lo que necesita HTML para tener algo para diseñar.
Un carrusel de «CSS puro» o «Solo CSS» significa que no necesita JavaScript. Esta es una buena noticia para la mayoría de los propietarios de sitios web porque JavaScript es un lenguaje de programación complejo que puede ser difícil de aprender y usar correctamente.
Ahora que tenemos una mejor idea de la terminología y el valor de pensar primero en CSS, veamos un ejemplo de construcción de un carrusel solo de CSS.
1. Crea diapositivas HTML.
Suponga que desea crear un carrusel con tres diapositivas. Entonces crearías tres artículos
<div class="slides">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>
2. Defina una propiedad de visualización en CSS.
Para diseñar el contenedor, use el selector de diapositivas de CSS. Para comenzar, establezca la propiedad de visualización en «flex» para que sea un cuadro flexible. Asegúrate de hacer lo mismo con tus toboganes para que también se conviertan en piezas flexibles. Aquí está el CSS:
.slides {
display: flex;
}
.slides > div {
display: flex;
}
Puede obtener más información sobre cómo usar Flexbox para crear diseños unidimensionales en Aquí está la diferencia entre Flexbox, CSS Grid y Bootstrap.
3. Defina la propiedad overflow-x para agregar una barra de desplazamiento.
Ahora queremos asegurarnos de que los usuarios puedan desplazar estas diapositivas manualmente. Para hacer esto, estableceremos la propiedad overflow-x del contenedor en automático. Esto proporciona un mecanismo para desplazarse a través de marcos desbordados o, en este caso, una presentación de diapositivas. Aquí está el CSS:
.slides {
overflow-x: auto;
}
4. Optimice el tamaño del carrusel para todos los dispositivos.
Luego, para cada diapositiva en el carrusel, estableceremos el ancho al 100 % para cubrir toda el área visible horizontalmente, y estableceremos el alto en 300 px. También estableceremos la propiedad flex-shrink en 0 para que las diapositivas no se encojan ni se envuelvan en dispositivos más pequeños. Aquí está el CSS:
.slides > div {
flex-shrink: 0;
width: 100%;
height: 300px;
}
5. Optimice el comportamiento de desplazamiento del carrusel para todos los dispositivos.
Hay algunas cosas más que podemos hacer para mejorar su experiencia de desplazamiento. Para hacer que cada diapositiva se «ajuste» a medida que se desplaza de una a otra, puede agregar puntos de ajuste utilizando la propiedad scroll-snap-type y la propiedad scroll snap align. También podemos asegurarnos de que la panorámica sea fluida tanto en el escritorio como en el móvil gracias a la propiedad de desplazamiento. Así es como se ve CSS:
.slides {
scroll-snap-type: x mandatory;
}
.slides > div {
scroll-snap-align: start;
scroll-behavior: smooth;
}
6. Dale estilo al carrusel.
Solo voy a estilizar mis tres diapositivas para que podamos verlas mejor cambiando el color de fondo a azul, alineando las diapositivas y el texto en el centro del contenedor y aumentando el tamaño de fuente. Aquí está el CSS:
.slides > div {
background: #74ABE2;
justify-content: center;
align-items: center;
font-size: 100px;
}
7. Combina todo el código.
Todos juntos, aquí está el CSS:
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slides > div {
display: flex;
flex-shrink: 0;
width: 100%;
height: 300px;
scroll-snap-align: start;
scroll-behavior: smooth;
background: #74ABE2;
justify-content: center;
align-items: center;
font-size: 100px;
}
Aquí está el resultado:
Carrusel de imágenes CSS
Puede crear un carrusel de imágenes usando Bootstrap o CSS «puro». Para los propósitos de esta demostración, usaremos Bootstrap ya que es más fácil crear controles deslizantes receptivos.
A continuación se muestra un proceso casi idéntico al descrito en Sección Bootstrap CSS arriba, excepto que agregaremos punteros en lugar de controles.
1. Cree div principal con atributos de identificación y clase.
Para comenzar, cree un elemento div y asígnele un nombre de ID único para que pueda aplicar punteros opcionales más adelante. Llamaré a este ejemplo «ImageCarouselCSS».
A continuación, desea definir el elemento con la clase de diapositiva .carrusel y agregar el atributo de recorrido de datos establecido en «carrusel». De esta manera, el carrusel comenzará a animarse tan pronto como se cargue la página, sin tener que hacer nada. Así es como se ve nuestro código HTML hasta ahora:
<div id="ImageCarouselCSS" class="carousel slide" data-ride="carousel">
</div>
2. Agregue una lista ordenada.
Luego crea una lista ordenada y defínela con el nombre de la clase carrusel-indicadores.
Coloque tres elementos dentro de la lista. Cada uno tendrá el atributo de destino de datos definido con el nombre del identificador de carrusel y el atributo de destino de datos. Este atributo se establecerá en 1 para el primer elemento de la lista, 2 para el segundo elemento de la lista y así sucesivamente.
La clase .active debe agregarse a uno de los elementos de la lista. Aquí está el código:
<ol class="carousel-indicators">
<li data-target="#ImageCarouselCSS" data-slide-to="0" class="active"></li>
<li data-target="#ImageCarouselCSS" data-slide-to="1"></li>
<li data-target="#ImageCarouselCSS" data-slide-to="2"></li>
</ol>
3. Agregue imágenes dentro de la división principal.
Coloque tantos elementos de imagen como desee en el carrusel en una lista ordenada. Digamos que queremos tener tres fotos de cachorros en el carrusel. Aquí está el HTML para estas imágenes:
<img src="https://source.unsplash.com/fk4tiMlDFF0/900x600/" class="d-block w-100" alt="tiniest puppy">
<img src="https://source.unsplash.com/TzjMd7i5WQI/900x600/" class="d-block w-100" alt="tiny puppy">
<img src="https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
Tenga en cuenta que las clases .d-block y .w-100 evitarán la alineación predeterminada de la imagen del navegador.
4. Envuelva cada imagen en un elemento div.
Envuelva cada una de estas imágenes en un elemento
Asegúrese de agregar la clase .active a una de sus imágenes para que el carrusel sea visible.
Así es como se ve el código:
<div class="carousel-item active">
<img src="https://source.unsplash.com/fk4tiMlDFF0/900x600/" class="d-block w-100" alt="tiniest puppy">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/TzjMd7i5WQI/900x600/" class="d-block w-100" alt="tiny puppy">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
</div>
5. Envuelva todos estos elementos div internos en otro elemento div.
Ahora, envuelva todos estos elementos del carrusel en un elemento
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/fk4tiMlDFF0/900x600/" class="d-block w-100" alt="tiniest puppy">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/TzjMd7i5WQI/900x600/" class="d-block w-100" alt="tiny puppy">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
</div>
</div>
6. Reúna todo el código.
Aquí está todo el código HTML:
<div id="ImageCarouselCSS" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ImageCarouselCSS" data-slide-to="0" class="active"></li>
<li data-target="#ImageCarouselCSS" data-slide-to="1"></li>
<li data-target="#ImageCarouselCSS" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/fk4tiMlDFF0/900x600/" class="d-block w-100" alt="tiniest puppy">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/TzjMd7i5WQI/900x600/" class="d-block w-100" alt="tiny puppy">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
</div>
</div>
</div>
Aquí está el resultado:
Agregar un control deslizante de carrusel a su sitio web
Los controles deslizantes de carrusel pueden ayudarlo a usar el espacio de manera eficiente y organizar el contenido en su sitio mientras mantienen a los visitantes interesados y les dan control sobre cómo leen su contenido. Si son la opción correcta para su sitio web, puede usar uno de los métodos anteriores para crear un control deslizante de carrusel sin JavaScript. Solo necesitas entender un poco de HTML y CSS.
Nota del editor: esta publicación se publicó originalmente en junio de 2020 y se actualizó para que esté completa.
