Carousel Modal Bootstrap Avanzado

Actualización: 10-03-2024

Además de ver lo que podemos hacer con los div y llamadas haciendo click en las imágenes, hay una demostración de cómo hacer un llamamiento al Slider Modal Avanzado desde un texto, simulando un href, y desde un botón.

Las imágenes se pueden desplazar si se utiliza una pantalla táctil.

Modal Carousel Bootstrap Avanzado necesita incluirle opcionalemte: carousel.css

<link href="/css/carousel.css" rel="stylesheet" type="text/css"> <!-- Configurar Modal, Carousel y colores Flechas -->

carousel.css

Incluye:

• /* Modal xxl un 10% más grande */
  @media (min-width: 1320px) {
  .modal-xxl {
  max-width: 1254px;
  }
• /* Cambiar los colores de las flechas Prev y Next del carousel */ Necesario para usar en fondos blancos
  .carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(50%);/*108%*/
  }

Modo de uso

• Se utilizan <a data-toggle="modal" data-target="#exampleModal"><span style="cursor: pointer;" class="-azul_link" alt="Cuarto slide" data-target="#carouselExample" data-slide-to="3">Click to open
• class="-azul_link" para simular un href=" " en un párrafo <p></p> clase propios.css
• Se utiliza style="cursor: pointer"; para mostrar un cursor al pasar el mouse por las imágenes.
• Se usa opcionalmente ToolTip en los mensajes

Para elegir la imagen o texto que queremos abrir en el Slider Modal Avanzado tenemos que utilizar data-slide-to="0" si se trata de la primera, data-slide-to="1" si se trata de la segunda y así sucesivamente.

Aunque el Slider Modal Avanzado está configurado en este ejemplo para redimensionar el tamaño de las imágenes más grandes, es aconsejable que todas las imágenes mantengan una misma relación de tamaño, aunque el tamaño de las verticales y horizontales puede diferir. Los textos o textos bajo las imagenes no tienen efecto con el tamaño de la imagen que es lo único que se redimensiona. Si el texto es muy largo es necesario hacer scroll para poder leerlo todo.

El ancho del modal carousel es lo único que no se redimensiona.

Este es un ejemplo de su uso pero la ventana modal y este slider carousel se pueden configurar siguiendo las instrucciones de Boostrap.

En resumen, lo mejor es:

• Imágenes verticales: todas la misma relación de tamaño
• Imágenes horizontales: todas la misma relación de tamaño

En el ejemplo Gallery 1, para hacerlo más complicado, se utilizan imágenes con distintos tamaños.

En el ejemplo Gallery 2,se utilizan la misma relación de tamaño.

Opcionalmente utilizamos ToolTip en cualquier color para indicar los mensajes.

Gallery 2

En el Carousel Modal Bootstrap Avanzado es aconsejable que todas las imágenes mantengan una misma relación de tamaño, aunque el tamaño de las verticales y horizontales puede diferir. Los textos o textos bajo las imagenes no tienen efecto con el tamaño de la imagen que es lo único que se redimensiona. Si el texto es muy largo es necesario hacer scroll para poder leerlo todo.

La ventana modal y este slider carousel se pueden configurar siguiendo las instrucciones de Boostrap.

En resumen, lo mejor es:

• Imágenes verticales: todas la misma relación de tamaño
• Imágenes horizontales: todas la misma relación de tamaño

Gallery 1: Ejemplo con imágenes de distinto tamaño

Gallery 2: Ejemplo con imágenes del mismo tamaño

Referencia

• CSS TRICKS - Creating a Modal Image Gallery With Bootstrap Components