carrossel Bootstrap (carrossel) Widget
Bootstrap carrossel (do carrossel) plug-in é uma resposta flexível para o site adicionar uma forma de estilo slider. Além disso, o conteúdo é flexível o suficiente, pode ser uma imagem, quadro embutido, vídeo ou qualquer outro tipo de conteúdo que você deseja colocar.
Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciacarousel.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.
Exemplos
Aqui é um simples slide usando carrossel Bootstrap (carrossel) plug-in mostra um elemento de circuito de componentes comuns. Para atingir a rotação, você só precisa adicionar o código com essa marca. Não há necessidade de utilizar atributos de dados, só precisa de um desenvolvimento baseado em classe simples pode ser.
Exemplos
<Div id = "myCarousel" class = "carrossel de slides">
<! - Carrossel (carrossel) Index ->
<Ol class = "carrossel-indicadores">
<Li data-target = "#myCarousel" Dados-slide-to = "0 " class = "ativo"> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "1 "> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "2 "> </ li>
</ Ol>
<! - Carrossel (carrossel) Projeto ->
<Div class = "carrossel interior">
<Div class = "item ativo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primeiro slide">
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segundo slide">
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third slides">
</ Div>
</ Div>
<! - Carrossel (carrossel) Navegação ->
<A class = "carrossel de controle de esquerda" href = "#myCarousel"
data-slide = "prev"> & lsaquo;
</ A>
<A class = "right-control carrossel" href = "#myCarousel"
Dados-slide = "next"> & rsaquo;
</ A>
</ Div>
tente »
Os resultados são os seguintes:
título opcional
Você pode adicionar legendas a um slide pelo elemento.carousel-caption .itemdentro. Apenas é necessário colocar qualquer HTML opcional para onde ele será alinhado e formatado automaticamente. O exemplo a seguir ilustra esse ponto:
Exemplos
<Div id = "myCarousel" class = "carrossel de slides">
<! - Carrossel (carrossel) Index ->
<Ol class = "carrossel-indicadores">
<Li data-target = "#myCarousel" Dados-slide-to = "0 " class = "ativo"> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "1 "> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "2 "> </ li>
</ Ol>
<! - Carrossel (carrossel) Projeto ->
<Div class = "carrossel interior">
<Div class = "item ativo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primeiro slide">
<Div class = "carrossel-caption"> Título 1 </ div>
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segundo slide">
<Div class = "carrossel-caption"> Título 2 </ div>
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third slides">
<Div class = "carrossel-caption"> Título 3 </ div>
</ Div>
</ Div>
<! - Carrossel (carrossel) Navegação ->
<A class = "carrossel de controle de esquerda" href = "#myCarousel"
data-slide = "prev"> & lsaquo;
</ A>
<A class = "right-control carrossel" href = "#myCarousel"
Dados-slide = "next"> & rsaquo;
</ A>
</ Div>
tente »
Os resultados são os seguintes:
uso
- Através atributo de dados: propriedade de dados pode ser facilmente controlada carrossel posição (carrossel).
- Atributo dedados aceita-corrediçaprevchave oupróxima,para alterar a posição da lâmina em relação à posição actual.
- Usandodados-slide-a passar um companheiro para o slide original para o índicederoda, data-slide-to = "2" irá mover o cursor para um índice específico, um índice de 0 a iniciar a contagem.
- -Ride data = atributo "carrossel"é utilizada para indicar a rotação quando a página é carregada para iniciar a reprodução do filme.
- Por JavaScript: Carrossel (carrossel) pode ser invocado manualmente através de JavaScript, como segue:
$ ( '. Carousel'). Carousel ()
opções
Existem algumas opções através de atributos de dados ou JavaScript para passar. A tabela a seguir lista estas opções:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
caminho
Aqui estão algumas das carrossel (do carrossel) plug-in formas úteis:
| 方法 | 描述 | 实例 |
|---|---|---|
| .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') |
Exemplos
O exemplo seguinte demonstra o método:
Exemplos
<Div id = "myCarousel" class = "carrossel de slides">
<! - Carrossel (carrossel) Index ->
<Ol class = "carrossel-indicadores">
<Li data-target = "#myCarousel" Dados-slide-to = "0 "
class = "ativo"> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "1 "> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "2 "> </ li>
</ Ol>
<! - Carrossel (carrossel) Projeto ->
<Div class = "carrossel interior">
<Div class = "item ativo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primeiro slide">
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segundo slide">
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third slides">
</ Div>
</ Div>
<! - Carrossel (carrossel) Navegação ->
<A class = "carrossel de controle de esquerda" href = "#myCarousel"
data-slide = "prev"> & lsaquo; </ a>
<A class = "right-control carrossel" href = "#myCarousel"
-Slide de dados = "next"> & rsaquo; </ a>
<! - Os botões de controle ->
<Div style = "text-align: center ;">
<Input type = "button" class = "btn start-slide" value = "Iniciar">
<Input type = "button" class = "btn pausa-slide" value = "Pausa">
<Input type = "button" class = "btn prev-slide" value = "Slide Anterior">
<Input type = "button" class = "btn próxima-slide" value = "Próximo Slide">
<Input type = "button" class = "btn slide-one" value = "Slide 1">
<Input type = "button" class = "btn slide-dois" value = "Slide 2">
<Input type = "button" class = "btn slide-três" value = "Slide 3">
</ Div>
</ Div>
<Script>
$ (Function () {
// Inicializar Carousel $ ( ".start-Slide") click (function () {$ ( "#myCarousel") carrossel ( "ciclo") ;.}) ;. // rotação Parar . $ ( ".pause-Slide" ) click (function () {. $ ( "#myCarousel") Carrossel ( 'pause');}); // rotação circuito em um projeto $ ( ".prev-Slide") click (function () {$ ( "#myCarousel") carrossel ( 'prev') ;.}) ;. // ciclo de rotação para o próximo item $ ( "-Slide .next") click (function () {$ ( "#myCarousel") carrossel ( 'next') ;.}) ;. // rotação Loop para um quadro específico $ ( ".slide-One") clique. (Function () {$ ( "#myCarousel") carrossel (0) ;.}) ;. $ ( ".slide-Two") click (function () {$ ( "#myCarousel") carrossel (1) ;.}); $ ( ".slide-três") click (function () {$ ( "#myCarousel") carrossel (2); ..});});
</ Script>
tente »
Os resultados são os seguintes:
evento
A seguinte tabela lista o carrossel (carrossel) plug-in para ser utilizado no evento. Estes eventos podem ser usados quando a função de gancho.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Exemplos
O exemplo a seguir demonstra o uso do evento:
Exemplos
<Div id = "myCarousel" class = "carrossel de slides">
<! - Carrossel (carrossel) Index ->
<Ol class = "carrossel-indicadores">
<Li data-target = "#myCarousel" Dados-slide-to = "0 "
class = "ativo"> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "1 "> </ li>
<Li data-target = "#myCarousel" Dados-slide-to = "2 "> </ li>
</ Ol>
<! - Carrossel (carrossel) Projeto ->
<Div class = "carrossel interior">
<Div class = "item ativo">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Primeiro slide">
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "segundo slide">
</ Div>
<Div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third slides">
</ Div>
</ Div>
<! - Carrossel (carrossel) Navegação ->
<A class = "carrossel de controle de esquerda" href = "#myCarousel"
data-slide = "prev"> & lsaquo; </ a>
<A class = "right-control carrossel" href = "#myCarousel"
-Slide de dados = "next"> & rsaquo; </ a>
</ Div>
<Script>
$ (Function () {$ ( . On ( 'slide.bs.carousel', a função '#myCarousel') () {
alert ( "quando o método de instância de slides invocada imediatamente acionou o evento.");});});
</ Script>
tente »
Os resultados são os seguintes:
