carrusel de arranque de widgets (carrusel)
Bootstrap carrusel (Carousel) plug-in es una respuesta flexible al sitio de añadir una manera de estilo deslizante. Además, el contenido es lo suficientemente flexible, puede ser una imagen, marco embebido, video o cualquier otro tipo de contenido que desea colocar.
Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia acarousel.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.
Ejemplos
Aquí está una diapositiva simple usando carrusel Bootstrap (carrusel) plug-in muestra un elemento de bucle de componentes comunes. Con el fin de lograr la rotación, sólo tiene que añadir el código con esa etiqueta. No hay necesidad de utilizar atributos de datos, sólo se necesita un simple desarrollo basado en la clase puede ser.
Ejemplos
<Div id = "myCarousel" class = "carrusel de diapositivas">
<! - Carousel (Carrusel) Índice ->
<ol class = "carrusel-indicadores">
<Li data-target = "#myCarousel" los datos se desliza para = "0 " class = "activa"> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "1 "> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "2 "> </ li>
</ Ol>
<! - Carousel (Carrusel) Proyecto ->
<Div class = "carrusel interior">
<Div class = "elemento activo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primera diapositiva">
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segunda diapositiva">
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "tercera diapositiva">
</ Div>
</ Div>
<! - Carousel (Carrusel) Navegación ->
<A class = "carrusel de control de la izquierda" href = "#myCarousel"
técnica de slide = "prev"> Y lsaquo;
</ A>
<A class = "derecho de control de carrusel" href = "#myCarousel"
técnica de slide = "next"> Y rsaquo;
</ A>
</ Div>
Trate »
Los resultados son los siguientes:
título opcional
Para añadir subtítulos a una diapositiva por el elemento.carousel-caption .iteminterior. Sólo hay que colocar todo el código HTML opcional a donde será alineado y formatea automáticamente. El siguiente ejemplo ilustra este punto:
Ejemplos
<Div id = "myCarousel" class = "carrusel de diapositivas">
<! - Carousel (Carrusel) Índice ->
<ol class = "carrusel-indicadores">
<Li data-target = "#myCarousel" los datos se desliza para = "0 " class = "activa"> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "1 "> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "2 "> </ li>
</ Ol>
<! - Carousel (Carrusel) Proyecto ->
<Div class = "carrusel interior">
<Div class = "elemento activo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primera diapositiva">
<Div class = "carrusel-caption"> Título 1 </ div>
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segunda diapositiva">
<Div class = "carrusel-caption"> Título 2 </ div>
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "tercera diapositiva">
<Div class = "carrusel-caption"> Título 3 </ div>
</ Div>
</ Div>
<! - Carousel (Carrusel) Navegación ->
<A class = "carrusel de control de la izquierda" href = "#myCarousel"
técnica de slide = "prev"> Y lsaquo;
</ A>
<A class = "derecho de control de carrusel" href = "#myCarousel"
técnica de slide = "next"> Y rsaquo;
</ A>
</ Div>
Trate »
Los resultados son los siguientes:
uso
- A través de atributo de datos: datos de la propiedad se puede controlar fácilmente la posición del carrusel (carrusel).
- Atributode datos-slide aceptaprevpalabra clave osiguiente,para cambiar la posición de la corredera con relación a la posición actual.
- Utilizando losdatos se desliza para pasar a un compañero a la diapositiva original con el índicede larueda, los datos se desliza para = "2" se mueva el control deslizante a un índice específico, un índice de 0 a empezar a contar.
- -Paseo de datos = atributo "carrusel"se utiliza para marcar la rotación cuando la página se carga al iniciar la reproducción de películas.
- Por JavaScript: Carousel (Carrusel) puede ser invocado de forma manual a través de JavaScript, de la siguiente manera:
$ ( '. Carrusel'). Carrusel ()
opciones
Hay algunas opciones a través de los atributos de datos o JavaScript para aprobar. En la siguiente tabla se muestran las siguientes opciones:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
camino
Éstos son algunos de carrusel (Carousel) plug-in de maneras útiles:
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next') |
Ejemplos
El siguiente ejemplo demuestra el método:
Ejemplos
<Div id = "myCarousel" class = "carrusel de diapositivas">
<! - Carousel (Carrusel) Índice ->
<ol class = "carrusel-indicadores">
<Li data-target = "#myCarousel" los datos se desliza para = "0 "
class = "activa"> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "1 "> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "2 "> </ li>
</ Ol>
<! - Carousel (Carrusel) Proyecto ->
<Div class = "carrusel interior">
<Div class = "elemento activo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primera diapositiva">
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segunda diapositiva">
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "tercera diapositiva">
</ Div>
</ Div>
<! - Carousel (Carrusel) Navegación ->
<A class = "carrusel de control de la izquierda" href = "#myCarousel"
técnica de slide = "prev"> Y lsaquo; </ a>
<A class = "derecho de control de carrusel" href = "#myCarousel"
-Diapositivas de datos = "next"> Y rsaquo; </ a>
<! - Botones de control ->
<Div style = "text-align: center ;">
<Input type = "button" class = "btn puesta en diapositivas" value = "Inicio">
<Input type = "button" class = "pausa BTN-deslizante" value = "Pausa">
<Input type = "button" class = "prev BTN-deslizante" value = "diapositiva anterior">
<Input type = "button" class = "btn próxima diapositiva" value = "Siguiente diapositiva">
<Input type = "button" class = "slide-BTN uno" value = "Slide 1">
<Input type = "button" class = "btn deslizable de dos" value = "Slide 2">
<Input type = "button" class = "btn racha de tres" value = "Transparencia 3">
</ Div>
</ Div>
<Script>
$ (Function () {
// Inicializar carrusel $ ( ".start-Slide") click (function () {$ ( "#myCarousel") del carrusel ( "ciclo") ;.}) ;. // rotación de parada . $ ( ".pause-Slide" ) click (function () {. $ ( "#myCarousel") Del carrusel ( "pausa");}); // rotación de bucle en un proyecto $ ( ".prev-Slide") click (function () {$ ( "#myCarousel") del carrusel ( 'ant') ;.}) ;. // ciclo de rotación a la orden del día, $ ( ".A-Slide") click (function () {$ ( "#myCarousel") del carrusel ( "siguiente") ;.}) ;. // rotación de lazo a una trama específica $ ( ".slide-Uno") , haga clic en. (Function () {$ ( "#myCarousel") del carrusel (0) ;.}) ;. $ ( ".slide-Two") click (function () {$ ( "#myCarousel") del carrusel (1) ;.}); $ ( ".slide de tres") click (function () {$ ( "#myCarousel") del carrusel (2); ..});});
</ Script>
Trate »
Los resultados son los siguientes:
evento
La siguiente tabla muestra el carrusel (Carousel) plug-in para ser utilizado en el evento. Estos eventos se pueden utilizar cuando la función de enlace.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Ejemplos
El siguiente ejemplo muestra el uso de la prueba:
Ejemplos
<Div id = "myCarousel" class = "carrusel de diapositivas">
<! - Carousel (Carrusel) Índice ->
<ol class = "carrusel-indicadores">
<Li data-target = "#myCarousel" los datos se desliza para = "0 "
class = "activa"> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "1 "> </ li>
<Li data-target = "#myCarousel" los datos se desliza para = "2 "> </ li>
</ Ol>
<! - Carousel (Carrusel) Proyecto ->
<Div class = "carrusel interior">
<Div class = "elemento activo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primera diapositiva">
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segunda diapositiva">
</ Div>
<Div class = "elemento">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "tercera diapositiva">
</ Div>
</ Div>
<! - Carousel (Carrusel) Navegación ->
<A class = "carrusel de control de la izquierda" href = "#myCarousel"
técnica de slide = "prev"> Y lsaquo; </ a>
<A class = "derecho de control de carrusel" href = "#myCarousel"
-Diapositivas de datos = "next"> Y rsaquo; </ a>
</ Div>
<Script>
$ (Function () {$ ( '#myCarousel'). En ( 'slide.bs.carousel', function () {
alert ( "cuando el método de instancia de diapositivas inmediatamente invocó disparado el evento.");});});
</ Script>
Trate »
Los resultados son los siguientes:
