Creando un slider usando Bootstrap. Cómo crear su propio control deslizante de arranque en unos pocos y sencillos pasos Carrusel receptivo para bootstrap 3
Twitter Bootstrap 3 es uno de los mejores marcos CSS para desarrollar y mantener sistemas de gestión de contenido. Con Bootstrap, puede crear fácilmente blogs o carteras utilizando el sistema de cuadrícula de Twitter Bootstrap (diseño de cuadrícula). En el corazón de muchos sistemas CMS, generalmente tenemos un componente básico llamado "Slider" (Carrusel), básicamente es una visualización autosecuencial de imágenes, pero también puede mostrar los últimos proyectos completados, testimonios de sus clientes, descripción de especiales ofertas, enlaces a noticias o artículos recientes del blog. En este artículo, veremos cómo crear un control deslizante utilizando el componente Carrusel en Twitter Bootstrap 3.
Introducción al componente de Twitter del carrusel de Bootstrap 3
El marcado para el componente carrusel se ve así:
>
...
>
>
...
>
>
>
>
>
>
Del código anterior, podemos ver que el control deslizante de Bootstrap 3 se divide en varias partes:
- Punteros
- Contenido del control deslizante
- Control S
Para transformar un elemento división en el control deslizante, agregamos los nombres de clase: carrusel y deslizar. Clase carrusel crea un efecto de "carrusel", es decir, cambia las diapositivas en un círculo. Clase deslizar agrega una animación deslizante desde el lado derecho o izquierdo. Los punteros son los pequeños círculos en la parte inferior del control deslizante, indican la posición actual de la diapositiva y el número de diapositivas. Los punteros se crean utilizando una lista ordenada.
>
Una lista ordenada tiene una clase. indicadores de carrusel, que transforma los elementos secundarios en pequeños círculos. cada elemento li debe tener atributo objetivo de datos con el ID del contenedor principal. También debe tener el atributo datos-deslizar-a con un valor numérico único, para referirse a una diapositiva específica, los valores deben comenzar con "0".
...
>
>
...
>
Cada elemento con una clase. artículo tiene dos subsecciones: imagen y carrusel-título. La imagen se utiliza como fondo de la diapositiva. elemento con clase carrusel-título colocado encima de la imagen y utilizado como título de la diapositiva. En el interior carrusel-título, podemos agregar
o etiquetas, o incluso ambas.
El control se lleva a cabo con las flechas izquierda y derecha, se utilizan para cambiar las diapositivas manualmente.
"glyphicon glyphicon-chevron-izquierda"> >
>
"glyphicon glyphicon-chevron-derecha"> >
>
>
Debe haber dos elementos: uno para cada dirección. El primer elemento tendrá lapso elemento con clases glyphicon glyphicon-chevron-izquierda, que es el icono de la flecha izquierda y el segundo elemento tendrá las clases glyphicon glyphicon-chevron-derecha, es una flecha derecha. En Bootstrap, podemos usar fuentes en lugar de imágenes para mostrar iconos.
¡Eso es todo! Ha creado correctamente un control deslizante para su sitio. Además, no escribiste una sola línea de código JavaScript, pero bootstrap.js hizo todo por ti.
configuración del carrusel
Para personalizar aún más el control deslizante, puede agregar varios atributos datos-* para el contenedor principal del carrusel.
- "intervalo de datos" se utiliza para especificar el intervalo de tiempo entre el cambio de diapositivas. Toma un valor numérico, y el número debe estar en milisegundos.
- "pausa de datos" se utiliza para determinar cuándo se activará el evento de pausa. Por ejemplo, cuando es igual a " flotar", el cambio de diapositivas se detiene cuando el mouse está sobre el control deslizante.
- "envoltura de datos" es un atributo booleano y le permite establecer si reanudar el cambio de diapositivas si se llega al final de la lista de diapositivas.
Personalización con jQuery
Si desea utilizar los atributos jQuery y data-*, Bootstrap permite la inicialización con JavaScript. Para hacer esto, puedes escribir el siguiente código:
$(".carrusel" ) .carrusel() ;
La configuración del carrusel se puede establecer mediante opciones. Por ejemplo:
$(".carrusel")
intervalo: 2000
pausa: "flotar",
envoltura: cierto
}
)
;
También puede activar eventos de control deslizante manualmente con el siguiente código:
- .carrusel("pausa") // pausa
- .carrusel("ciclo") // habilitar diapositivas
- .carrusel(3) // mostrar la cuarta diapositiva
- .carousel("prev") // muestra la diapositiva anterior
- .carrusel("siguiente") // muestra la siguiente diapositiva
Los métodos anteriores se pueden llamar desde cualquier código JavaScript para controlar el funcionamiento normal del control deslizante. Los métodos anterior y siguiente me parecen muy útiles si quiero mostrar mis propios botones en lugar de las flechas estándar. Especialmente cuando están fuera del diseño del carrusel.
Conclusión
Este artículo debería ser útil para aquellos que quieran aprender a crear un control deslizante sin escribir miles de líneas de código JavaScript. Sin duda, esto aumentará la velocidad de desarrollo. Lo más importante es que esta solución es multinavegador, por lo que no tiene que arrancarse los pelos para que funcione en navegadores más antiguos.
Si tiene alguna pregunta, utilice nuestro
Componente de presentación de diapositivas para elementos de ciclismo: carrusel de imágenes o diapositivas de texto.
Cómo funciona
Carrusel es una presentación de diapositivas para mostrar una serie de contenido basado en transformaciones 3D CSS y algo de JS. Funciona con texto, imágenes o marcado normal. También es compatible con los botones siguiente/anterior.
Ejemplo
El carrusel no normaliza automáticamente el tamaño del contenido de la diapositiva. Por lo tanto, es posible que necesite utilidades adicionales para que su contenido tenga el tamaño correcto. Siempre que los carruseles admitan los botones anterior/siguiente, no es necesario agregarlos explícitamente. Agrégalos y personalízalos tú mismo.
Asigne una identificación única a la clase .carousel para mayor flexibilidad, especialmente si usa muchos carruseles en una página.
Solo diapositivas
Aquí hay un ejemplo de un carrusel con solo diapositivas. Tenga en cuenta la presencia de las clases .d-block y .img-fluid en las imágenes del carrusel: su propósito es evitar que el navegador defina la alineación de la imagen.
Con controles
Agrega botones anterior/siguiente:
Con indicadores
También puede agregar indicadores al carrusel junto con los controles.
Requiere elemento activo inicial
La clase .active debe agregarse a una de las diapositivas, de lo contrario, el carrusel no será visible.
con inscripciones
Agregue subtítulos a sus diapositivas agregando un elemento de clase .carousel-caption a cualquier elemento de carrusel de la clase .carousel-item. Las etiquetas son fáciles de ocultar en dispositivos más pequeños mediante las utilidades de visualización. Se ocultan inicialmente con la clase .d-none y se vuelven a mostrar en dispositivos medianos con la clase .d-md-block.
Etiqueta de la primera diapositiva
Nulla vitae elit libero, un pharetra augue mollis interdum.
Etiqueta de la segunda diapositiva
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiqueta de la tercera diapositiva
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
...
Uso
A través de atributos
El atributo data-slide toma los valores anterior o siguiente, que cambian la posición de la diapositiva con respecto a su posición actual. O use data-slide-to para navegar a la diapositiva en el índice, como 2: data-slide-to="2" , los índices de diapositivas comienzan en 0 .
El atributo data-ride="carrusel" se usa para crear la animación del carrusel. No se puede combinar con la inicialización de carrusel explícita a través de JavaScript.
A través de JavaScript
Llame al carrusel manualmente:
$(".carrusel"). carrusel()Opciones
Los parámetros se pueden pasar a través de atributos o JavaScript. Para usar atributos, agregue el nombre del parámetro a data- , por ejemplo: data-interval="" .
| Nombre | Tipo de | Por defecto | Descripción |
|---|---|---|---|
| intervalo | número | 5000 | Tiempo de retardo entre cambios automáticos de diapositivas. Si es falso, el carrusel no cambiará automáticamente las diapositivas. |
| teclado | booleano | verdadero | Si el carrusel responderá a los eventos del teclado. |
| pausa | cadena | booleano | flotar |
Si se establece "hover", el cambio de diapositiva se ralentiza con mouseenter y el cambio comienza con mouseleave. Si es falso, pasar el cursor sobre el carrusel no detendrá el cambio de diapositivas. Dispositivos activados por contacto: "pasar": pausa en el extremo táctil (cuando el usuario ha terminado de interactuar con el carrusel) durante dos intervalos, luego cambia las diapositivas nuevamente. Tenga en cuenta que este comportamiento se suma al comportamiento del mouse descrito anteriormente. |
| conducir | línea | falso | Carrusel de diapositivas de cambio automático después del primer cambio manual de diapositivas por parte del usuario. Si el carrusel, el cambio automático está habilitado después de la carga. |
| envolver | booleano | verdadero | Si el carrusel debe cambiar suavemente o discretamente. |
Métodos
Transiciones y métodos asincrónicos
Todos los métodos API asincrónico y lanzamiento transición. Se devuelven a la función que los llamó cuando comienza la transición, pero hasta el final. Además, llamando a un método en un componente, la ejecución de la transición será ignorada.
.carrusel(opciones)
Inicializa el objeto de carrusel con las opciones especificadas e inicia la transición de diapositivas.
$(".carrusel"). carrusel (( intervalo : 2000 )).carrusel("ciclo")
Cambia las diapositivas del carrusel de izquierda a derecha.
.carrusel("pausa")
Detiene la transición de diapositivas.
.carrusel(número)
Desplaza las diapositivas hasta cierto punto (basado en 0, similar a las filas).
.carrusel("anterior")
Se desplaza a la diapositiva anterior. Devuelve el valor de la llamada de función antes de que se muestre el elemento "objetivo".(es decir, antes de que se dispare el evento slid.bs.carousel).
.carrusel("siguiente")
A la siguiente diapositiva. Devuelve el valor de la llamada de función antes de que se muestre el elemento "objetivo".(es decir, antes de que se dispare el evento slid.bs.carousel).
.carrusel("eliminar")
Destruye el carrusel del artículo.
Desarrollos
El carrusel en Bootstrap tiene 2 eventos para aplicar la funcionalidad. Ambos eventos tienen las siguientes propiedades adicionales:
- dirección: la dirección en la que se mueven las diapositivas ("izquierda" o "derecha").
- relatedTarget: el elemento DOM que se mueve a la posición de la diapositiva "girada".
- from: El índice de la diapositiva actual
- a: índice de la siguiente diapositiva
Todos los eventos del carrusel se activan directamente en el carrusel (es decir, en
Buen día a todos los que quieran aprender algo nuevo de los elementos del framework Bootstrap. El tema de hoy es el control deslizante Bootstrap Carousel. Este es un elemento popular que está presente en casi todos los sitios web.
Por lo tanto, le diré cómo crear un control deslizante Carrusel, qué herramientas integradas se necesitan para esto, cómo puede configurar los parámetros y, al final del artículo, mostraré la implementación de un ejemplo específico. ¡Y ahora manos a la obra!
Todo sobre las herramientas del complemento de carrusel de Bootstrap
Se utiliza una galería de fotos en carrusel para presentar nuevas ofertas, productos, una lista de promociones actuales, visualización conveniente de cartera, etc. Por lo tanto, hoy es importante poder trabajar con este complemento bajo nombre oficial Complemento de carrusel Bootstrap.
Cabe señalar de inmediato que el elemento descrito no es compatible correctamente con Internet Explorer 9 y versiones anteriores. Sin embargo, funciona muy bien (para WordPress, Joomla! y otros motores, conectar el marco es bastante simple).
Para operar fácilmente con todos los parámetros y personalizar rápidamente el control deslizante, debe aprender las principales clases integradas de Bootstrap 3.
| Clase | objetivo |
| carrusel | Crea el propio control deslizante Carrusel. |
| deslizar | Agrega con css el efecto de animación y transiciones al cambiar entre diapositivas. La clase es opcional. |
| indicadores de carrusel | Agrega, por así decirlo, un panel de control en forma de pequeños puntos en la parte inferior de cada imagen, mediante el cual puede cambiar rápidamente a cualquier imagen. La clase es opcional. |
| carrusel-interior | Agrega las propias diapositivas a la galería. |
| carrusel-título | Responsable de la firma de archivos gráficos. Se puede incluir como se desee. |
| artículo | Define un conjunto de contenido para cada diapositiva. |
| Control de carrusel derecho/izquierdo | Agrega botones derecho e izquierdo según el nombre para cambiar entre marcos. |
Además, vale la pena conocer otras características del diseño de tales galerías.
Para empezar, la creación del propio bloque Carrusel requiere una declaración id="miCarrusel" para el correcto funcionamiento de este último.
En el mismo div, debe registrar el atributo data-ride="carrusel", que especifica que la animación debe cargarse tan pronto como se cargue la página.
Ahora pasemos a los indicadores. Cada etiqueta li debe tener un par de atributos: objetivo de datos, que apunta al ID de un carrusel específico, y datos-deslizar-a, que determina a qué número de cuadro ir.
En cuanto a los botones que hacen avanzar o retroceder las imágenes, para implementarlos vale la pena registrar el atributo diapositiva de datos con la palabra clave "anterior" o "siguiente".
Ahora conoce los elementos básicos del marco, gracias a los cuales puede editar la visualización del control deslizante de cierta manera. Naturalmente, puede deshabilitar el desplazamiento automático de marcos, los títulos de las imágenes o los botones laterales.
Mecanismos de control alternativos
Además de usar las clases integradas de Bootstrap, también puede consultar . Entonces, hay muchos métodos y opciones en JS que implementan las mismas acciones, solo a través de la herramienta $.carousel(). Entre ellos se pueden enumerar como:
prueba de conocimientos
Bueno, ahora es el momento de verificar cómo aprendiste el material y consolidar el conocimiento adquirido. Para hacer esto, describiré cada acción que deberá realizar en el camino hacia la creación del "Carrusel".
Primero debe incluir los scripts y estilos requeridos. Prefiero, pero puedes descargar el marco desde el sitio web oficial ( http://getbootstrap.com/) y coloque los archivos descargados en la raíz del directorio del proyecto.
Si está de acuerdo conmigo, en el encabezado del documento escribimos:
| 1 2 3 |
Si es partidario del segundo método, en lugar de la primera parte del enlace, debe insertar la ruta al archivo.
Ahora queda implementar en el control deslizante. Para hacer esto, use su conocimiento adquirido y escriba las piezas de código necesarias en orden:
- abriendo un bloque común responsable del instrumento descrito;
- un bloque para especificar indicadores de control;
- bloque para los toboganes mismos;
- Implementación de botones laterales.
Solo el segundo y el último div pueden excluirse de esta lista.
Ahora definitivamente estás listo para escribir código.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/*Crear el bloque principal*/ /*Llenando portaobjetos*/
Romántico
Festivo
Hogar
Boda |
/*Crear el bloque principal*/
Romántico
Ramo de rosas delicadas para una declaración de amor
Festivo
Un regalo brillante para cualquier ocasión.
Hogar
Una canasta de flores frescas traerá comodidad a cualquier hogar.
Boda
Los colores delicados enfatizarán la importancia del evento.
Un componente de presentación de diapositivas para iterar a través de elementos de imagen o diapositivas de texto de carrusel. En los navegadores que admiten la API de visibilidad de página, el carrusel evitará cambiar de diapositiva cuando las páginas web no estén visibles para el usuario (por ejemplo, cuando el navegador está inactivo, la ventana del navegador está minimizada, etc.). Los carruseles anidados no son compatibles.
Ejemplo
Las animaciones no son compatibles con Internet Explorer 9
Bootstrap usa exclusivamente CSS3 para la animación, pero Internet Explorer 9 no admite las propiedades CSS requeridas. Por lo tanto, no hay animación de transición de diapositivas cuando se usa este navegador. Elegimos deliberadamente no incluir respaldos basados en jQuery para las transiciones.
Elemento activo inicial requerido
La clase .active debe agregarse a una de las diapositivas. De lo contrario, los carruseles no serán visibles.
títulos adicionales
Agregue fácilmente subtítulos a sus diapositivas con un elemento .carousel-caption en cualquier .carousel-item . Coloque aproximadamente HTML adicional allí y se alineará y formateará automáticamente.
etiqueta de la primera diapositiva
Nulla vitae elit libero, un pharetra augue mollis interdum.
etiqueta de la segunda diapositiva
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
tercera etiqueta de diapositiva
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
...
Problema de accesibilidad
El componente carrusel no cumple en absoluto con los estándares de accesibilidad. Si necesita compatibilidad, considere otras formas de presentar su Contenido.
Uso
Múltiples carruseles
Los carruseles requieren el uso de una identificación en el contenedor más externo (en .carrusel) para administrar el carrusel para que funcione correctamente. Al agregar varios carruseles, o al cambiar la identificación del carrusel, asegúrese de actualizar los controles correspondientes.
Con estos atributos
Usando atributos de datos, es fácil controlar la posición del carrusel. la diapositiva de datos se puede solicitar mediante prev o next , lo que cambia la posición del control deslizante en relación con su posición actual. Alternativamente, use data-slide-to para pasar el índice de la diapositiva de carrusel sin procesar a data-slide-to="2" , que compensa la posición de la diapositiva con definiciones de índice que comienzan desde 0 .
El atributo data-ride="carrusel" se usa para designar el carrusel como una animación que comienza desde la carga de la página. No se puede usar junto con (innecesariamente) la inicialización explícita de JavaScript del mismo carrusel.
A través de JavaScript
Llame al carrusel manualmente con:
$(".carrusel"). carrusel()Opciones
Los parámetros se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, ingrese el nombre del parámetro data- , por ejemplo data-interval="" .
Métodos
.carrusel(opciones)
Inicializa el carrusel con el objeto de opciones y comienza a iterar a través de los elementos.
$(".carrusel"). carrusel (( intervalo : 2000 )).carrusel("ciclo")
Recorre los elementos del carrusel de izquierda a derecha.
.carrusel("pausa")
Evita que el carrusel itere sobre los elementos.
.carrusel(número)
Ciclos de carrusel para un marco específico (basado en 0, similar a una matriz).
.carrusel("anterior")
Ciclos al punto anterior.
.carrusel("siguiente")
Pasa al elemento siguiente.
Desarrollos
La clase de carrusel de Bootstrap proporciona dos eventos para conectar con la funcionalidad del carrusel. Ambos eventos tienen las siguientes propiedades adicionales:
- dirección: la dirección en la que los carruseles retroceden (ya sea "izquierda" o "derecha").
- relatedTarget: el elemento DOM se desliza en su lugar como el elemento activo.
Todos los eventos del carrusel se activan en el propio carrusel (es decir,
Implementemos el control deslizante en Bootstrap Framework, que también se conoce como Twitter Bootstrap. Para hacer esto, vaya al sitio web de Bootstrap, descargue sus archivos a su computadora y transfiera estos archivos a su entorno de desarrollo.
Preparé toda la estructura por adelantado, los incluí en su archivo de índice y puede descargar el archivo completo desde el enlace a continuación.
Descomprímalo y transfiera todos los archivos a su entorno de desarrollo.
Considere la estructura del archivo.
Repasemos su estructura de archivo, consideremos lo que contiene.
Abrimos el archivo de índice, en la parte superior está conectada la biblioteca Jquery, detrás está el marco de arranque con la extensión js que se encuentra en la carpeta JS, luego conectamos el arranque con la extensión CSS, y debajo conectamos el archivo donde escribiremos nuestros estilos, todo esto se encuentra en la carpeta CSS. En la carpeta de fuentes, hay íconos que usa bootstrap, en Img hay imágenes para el control deslizante y una imagen para el fondo.
Esta es la plantilla completa y su estructura completa, luego procedamos a la descripción del marco.
Describiendo el marco del deslizador
Cree un div con el control deslizante id id="dws-slider" , agregue la clase "carousel slide" .
Luego escribimos cada elemento de la diapositiva en un bloque separado y hacemos tres de ellos.
(.item>img+.carrusel-título>h3.texto-mayúsculas+p)*3
Y para que se muestre la primera diapositiva, debe agregar la clase .active al primer elemento. Luego llenamos los bloques con contenido de texto.
Control deslizante receptivo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet elit lorem, ac congue mi eleifend sit amet. Sed dignissim viverra neque a tristique.
Desplazamiento animado
Aenean cursus imperdiet erat sit amet facilisis. Phasellus congue, sem in consectetur accumsan, tellus risus sollicitudin mauris, quis ornare libero magna eget ex.
Fácil instalación
Praesent dictum, orci eget eleifend auctor, urna ex dapibus odio, vitae pretium neque massa vel neque. Donec et interdum diam. Morbi dignissim vestibulum mi ac viverra.
Ahora agreguemos controles a los lados del control deslizante.
Anterior próximo
Detengamos temporalmente la publicación automática.
Agreguemos indicadores de desplazamiento.
Describir estilos y animaciones.
Vayamos al archivo de estilo y describamos los bloques con texto.
Carrusel-inner h3 ( color de fondo: rgba(20, 49, 68, 0.6); relleno: 20px; ) .carousel-inner p ( tamaño de fuente: 18px; color de fondo: rgba(30, 29, 29, 0.6 ); relleno: 20px; )
Asígneles fotogramas clave y haga una animación.
Carrusel-inner h3 (color de fondo: rgba(20, 49, 68, 0.6); relleno: 20px; animación: anim-H3 1.3s de salida; ).carrusel-inner p (tamaño de fuente: 18px; fondo- color: rgba(30, 29, 29, 0.6); relleno: 20px; animación: anim-P 1.6s de salida; ) @keyframes anim-H3 ( from (opacity: 0; transform: translateX(-2000px); ) a ( opacidad: 1; transformar: traducirX(0); ) ) @keyframes anim-P ( de ( opacidad: 0; transformar: traducirX(2000px); ) a ( opacidad: 1; transformar: traducirX(0); ) )
Adaptar bloques con texto
Para que los estilos de consulta de medios funcionen correctamente, escribamos la metaetiqueta de la ventana gráfica.
Vaya al archivo multimedia y describa en él los estilos para bloques con texto para diferentes extensiones.
Carrusel-inner h3 ( tamaño de fuente: 20 px; relleno: 15 px; ) .carousel-inner p ( tamaño de fuente: 16 px; relleno: 10 px; ) @media all y (ancho máximo: 768 px) ( .carousel-caption ( inferior: 10 %; ) .carousel-inner h3 ( tamaño de fuente: 18 px; ) .carousel-inner p ( tamaño de fuente: 14 px; ) ) @media all y (ancho máximo: 600 px) ( .carousel-inner h3 ( pantalla: ninguno; ) .carousel-inner p ( pantalla: ninguno; ) )
Luego, puede configurar el desplazamiento automático en 7 segundos y el control deslizante estará listo.
Si te gustó el ejemplo de implementación del control deslizante de Bootstrap 3, compártelo con tus amigos en las redes sociales.
La lección fue preparada por Gorelov Denis.