Cómo crear un carrusel de imágenes con Bootstrap

Existen muchísimos plugins para crear slides en jQuery totalmente gratuitos para rotar elementos como si fuera un bucle. Pero si la aplicación web utiliza el framework Bootstrap, no necesitaremos un plugin jQuery adicional para crear un slide de elementos como un carrusel. Bootstrap JS Carousel (carousel.js) te proporciona una forma sencilla de implementar un carrusel en una página web.

En este tutorial, te mostraremos cómo crear un carrusel de imágenes con Bootstrap. También, utilizando este código de ejemplo, podrás ampliar la funcionalidad de carrusel de Bootstrap y crear diferentes tipos de sliders.

[irp posts=”514″ name=”Atom el editor de Código abierto instalación plugin Activate Power Mode”]

Antes de empezar a crear nuestro carrusel, vamos a incluir la librería Bootstrap y la de jQuery.

Carrusel con Bootstrap

El siguiente ejemplo crea un carrusel muy básico.

Carrusel con Bootstrap con títulos

El siguiente ejemplo crea un carrusel muy básico y añade títulos a cada una de las imágenes.

Carrusel con Bootstrap con controles personalizados

El siguiente ejemplo llama a un carrusel manual el cual cuenta con unos controles personalizados para gestionar el paso de imágenes.

código javascript

Opciones del carrusel

Puedes configurar las siguientes opciones en carrusel de Bootstrap según tus necesidades.

  • interval (número) – Define la cantidad de tiempo entre cada uno de los elementos del slide. Puedes ponerlo a false para que el slider no se reproduzca automáticamente. El tiempo por defecto es de 5000 milisegundos.
  • pause (cadena|null) – Pausa el ciclo cuando el ratón se pose encima, y lo reanuda cuando el ratón abandona el slide. Puedes definir este valor a false para impedir este comportamiento. El valor por defecto de esta opción es hover.
  • wrap (booleano) – Especifica si el carrusel debe ciclar continuamente o deternerse en el último elemento. El valor por defecto es true.
  • keyboard (booleano) – Especifica si el carrusel debe reaccionar a los eventos del teclado. El valor por defecto es true.

Cómo utilizar estas opciones

El siguiente ejemplo muestra cómo definir las opciones del carrusel.

Fuente: codexworld.com