Este artículo aprende principalmente el complemento JavaScript - Carousel. Sin más preámbulos, solo ve a estudiar. Se puede ver el tutorial completo: Tutorial Bootstrap 3.0
Carrusel
La siguiente es una caja de carrusel realizada por este complemento y componentes relacionados.
<body> <div id = "Carousel-Example-Generic" data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-Target = "#Carousel-Example-Generic" data-slide-to data-Target = "#Carousel-Example-Generic" data-slide-to = "2"> </li> </ol> <!-Wrapper para diapositivas-> <div style = "text-align: centro"> <div> <img>/img> </phiv> <div> <img>/img> </div> <div> <img>/img> </bg> " href = "#Carousel-Example-Generic" data-slide = "previo"> <span> </span> </a> <a href = "#Carousel-Example-Generic" data-slide = "next"> <span> </span> </a> </div> <script src = "js/jQuery-2.0.3.min.js"> </script> <scry> <script> src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> // $ ('. Carousel'). Carousel ('next'); </script> </body>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, Bootstrap no tiene la intención de utilizar funciones alternativas basadas en jQuery.
Opciones opcionales
En cualquier .Item, puede agregar. También puede agregar cualquier código HTML, que se organizará y formateará automáticamente.
<Div> <IMG>/img> <div> <h4> Primera etiqueta de miniatura </h4> <p> Cras Justo Odio, Dapibus AC facilisis en, eggesges egg quam. Donec Id Elit Non Mi Porta Gravida en Eget Metus. Nulam Id Dolor Id Nibh Ultricies Vehicula UT ID Elit. </p> </div> </div>
Agregue tres elementos y luego se calificará el efecto.
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.
Agrégalo en el recipiente de carrusel más externo
<div id = "Carousel-exame-Genérico" data-ride = "Carousel">
a través de JavaScript
Comience manualmente el componente del carrusel (arriba encendemos automáticamente el componente del carrusel utilizando la propiedad de la conducción de datos).
$ ('. 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 = "".
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}).Carusel ('ciclo') buceará cada cuadro de izquierda a derecha.
.Carusel ('Pausa') detiene el carrusel.
.Carusel (número) posiciona el carrusel al marco especificado (el subíndice de cuadros comienza con 0, similar a una matriz).
.Carousel ('previo) regresa al marco anterior.
.carousel ('siguiente') Vaya al siguiente cuadro.
evento
El componente de carrusel de Bootstrap expone dos eventos para escuchar.
$ ('#Carousel-Example-Generic'). on ('slide.bs.carousel', function () {alerta (1);})Esto une eventos al componente del carrusel y luego los ejecuta en el tiempo de ejecución correspondiente. Esto se explicó mucho en los complementos anteriores de JavaScript, y los formularios son todos generales, por lo que puede usarlos.
imagen
Estos son varios complementos de carrusel más prácticos, que tienen muy buenos resultados. Si se usan razonablemente, siempre agregarán puntos a su página. Espero que sea útil para el aprendizaje de todos.
Si no está satisfecho, puede consultar estos artículos para el estudio en profundidad: ¡el editor de "Bootstrap Learning Tutorial" avanza con usted!
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar dos temas emocionantes:
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.