O melhor tutorial carrossel Bootstrap (carrossel) Widget em 2024. Neste tutorial você pode aprender
Exemplos,Exemplos,Exemplos,uso,opções,caminho,Exemplos,evento,Exemplos,
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">
<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>
<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>
<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">
<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>
<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>
<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
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">
<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>
<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>
<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 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 () {
$ ( ".start-Slide") click (function () {$ ( "#myCarousel") carrossel ( "ciclo") ;.}) ;. // . $ ( ".pause-Slide" ) click (function () {. $ ( "#myCarousel") Carrossel ( 'pause');}); // $ ( ".prev-Slide") click (function () {$ ( "#myCarousel") carrossel ( 'prev') ;.}) ;. // $ ( "-Slide .next") click (function () {$ ( "#myCarousel") carrossel ( 'next') ;.}) ;. // $ ( ".slide-One") clique. (Function () {$ ( "#myCarousel") carrossel (0) ;.}) ;. $ ( ".slide-Two") click (function () {$ ( "#myCarousel") carrossel (1) ;.}); $ ( ".slide-três") click (function () {$ ( "#myCarousel") carrossel (2); pt});});
</ 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 () {
// 执行一些动作pt.
})
|
slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作pt.
})
|
Exemplos
O exemplo a seguir demonstra o uso do evento:
Exemplos
<Div id = "myCarousel" class = "carrossel de slides">
<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>
<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>
<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: