Bootstrap es un marco front-end para el rápido desarrollo de aplicaciones web y sitios web. Bootstrap se basa en HTML, CSS y JavaScript.
Caso
La siguiente es una caja de carrusel realizada por este complemento y componentes relacionados.
<div id = "Carusel-Example-Generic" Data-Ride = "Carousel"> <!-Indicadores-> <ol> <li Data-Target = "#Carousel-Example-Generic" Data-Slide-To = "0"> </li> <li Data-Target = "#Carousel-Expleamper-Genérico" data-target = "#Carousel-exame-Generic" data-slide-to = "2"> </li> </ol> <!-Wrapper para diapositivas-> <div> <div> <img src = "..."> <div> ... </div> </div> ... </div> <!-Controls-> <a href = "#carousel-example-generer" "" "" data-slide = "previo"> <span> </span> </a> <a href = "#Carousel-Example-Generic" data-slide = "next"> <span> </span> </a> </div>
Internet Explorer 8 y 9 no admite los efectos de animación de transición
Bootstrap implementa efectos de animación basados en CSS3, pero Internet Explorer 8 y 9 no admite estas propiedades CSS necesarias. Por lo tanto, los efectos de animación de transición se perderán al usar ambos navegadores. Además, no tenemos la intención de utilizar la implementación basada en jQuery de funciones alternativas.
Opciones opcionales
En cualquier .Item, puede agregar. También puede agregar cualquier código HTML, que se organizará y formateará automáticamente.
900x500
<Viv> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Problemas de accesibilidad
El componente del carrusel no es compatible con los estándares de accesibilidad. Si se requiere compatibilidad, considere otras opciones para presentar diapositivas.
uso
A través del atributo de datos
El atributo de datos puede controlar fácilmente el posicionamiento del carrusel. Data-Slide puede aceptar palabras clave previas o siguientes que controlan la posición de reproducción. Además, el subíndice de diapositivas que comienza con 0 también se puede pasar a través de datos de deslizamiento.
El atributo Data-Ride = "Carousel" se utiliza para marcar el componente del carrusel que se inicia después de que se carga la página.
a través de JavaScript
Comience manualmente el componente del carrusel:
La copia del código es la siguiente:
$ ('. Carousel'). Carousel ()
Opción
Las opciones se pueden pasar a través de propiedades de datos o JavaScript. Para los atributos de datos, debe poner el nombre de la opción después de datos, por ejemplo, datos-interval = "".
Tipo de nombre El valor predeterminado describe el tiempo de espera para el número de intervalo de intervalo 5000 rotación de diapositivas. Si False, el carrusel no comenzará el bucle automáticamente. Pausa de la cuerda "desplazada" El mouse se queda en el área de diapositivas y detiene el carrusel, y el mouse deja el carrusel. Envuelva booleano verdadero si el carrusel continúa en bucle.
método
.Carusel (opciones)
Inicialice el componente del carrusel, acepte un parámetro de opción de tipo de objeto opcional e inicie el bucle de deslizamiento.
$ ('. Carousel'). Carousel ({Intervalo: 2000}). Carousel ('ciclo')Ciclo cada cuadro de izquierda a derecha.
.Carusel ('Pausa')
Detente el carrusel.
.Carusel (número)
Coloque el carrusel al marco especificado (el subíndice de cuadro comienza con 0, similar a una matriz).
.Carusel ('previo')
Volver al marco anterior.
.Carusel ('Siguiente')
Vaya al siguiente cuadro.
evento
El componente de carrusel de Bootstrap expone dos eventos para escuchar.
| Tipo de evento | describir |
|---|---|
| slide.bs.carusel | Este evento comienza inmediatamente después de que se llame slide . |
| slid.bs.carusel | Se activa cuando se juegan todas las presentaciones de diapositivas. |
$ ('#myCarousel'). on ('slide.bs.carousel', function () {// haz algo ...})Lo anterior es la explicación detallada del caso de efecto Bootstrap Carousel basado en el complemento JS introducido por el editor. ¡Espero que pueda ayudarte!