O plug-in de bootstrap carousel é uma maneira flexível e responsiva de adicionar controles deslizantes ao seu site. Além disso, o conteúdo é flexível o suficiente para ser uma imagem, um quadro incorporado, um vídeo ou qualquer outro tipo de conteúdo que você queira colocar.
Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência a carousel.js. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap , você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Exemplo
Abaixo está um slide simples que mostra um componente comum de um elemento de loop usando o plug -in de bootstrap carousel. Para implementar o carrossel, você só precisa adicionar o código a essa marca. Não há necessidade de usar atributos de dados, apenas um simples desenvolvimento baseado em classe.
<! Doctype html> <html> <head> <title> Instância de bootstrap- plug-in de carrossel simples </title> <link href = "/bootstrap/css/bootstrap.min.css" Rel = "StyleSheet"> <Script Src = "/scripts/jQuy.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-carrossel indicador-> <ol> <li data-target = "#mycarousel" data-slide-to "0"> <li> <li <li <li <li <li-Target = "#mycarousel" Data-slide-to "0"> <li> <i> <li <li- li <li) <li data-Target = "#myCarousel" Data-slide-to = "2"> </li> </ol> <!-Projeto de carrossel-> <div> <img src = "/mídia/uploads/2014/07/slide1.png"> </div> <div> <mig src =/07/uplroug <img src = "/mídia/uploads/2014/07/slide3.png"> </div> </div> <!-navegação por carrossel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" slide = "Data"> ‹</a> <a href = "#mycarousel" Data "
Os resultados são os seguintes:
Plugin de carrossel simples
2. Título opcional
Você pode adicionar um título ao slide através do elemento .Carousel-Caption dentro do .Item. Basta colocar qualquer HTML opcional lá e ele será alinhado e formatado automaticamente. O exemplo a seguir demonstra o seguinte:
<!DOCTYPE html><html><head> <title>Bootstrap instance - Title of Carousel plug-in</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-carrossel indicador-> <ol> <li data-target = "#mycarousel" data-slide-to "0"> <li> <li <li <li <li <li-Target = "#mycarousel" Data-slide-to "0"> <li> <i> <li <li- li <li) <li data-target = "#myCarousel" Data-slide-to = "2"> </li> </ol> <!-Projeto de carrossel-> <div> <img src = "/mídia/uploads/2014/07/slide1.png"> <////Div> </div> <iv> <div> Título 2 </div> </div> <div> <img src = "/Media/uploads/2014/07/slide3.png"> <div> Título 3 </div> </div> </div> <!-Navegação carrossel-> <a href = "#myCarousel" Data-slide = " Data-slide = "Next" >› </a> </div> </body> </html>
Os resultados são os seguintes:
Título do plug -in do carrossel
3. Uso
Através do atributo de dados: usando atributos de dados, é fácil controlar a posição do carrossel.
O deslizamento de dados da propriedade aceita a palavra-chave Anterior ou a próxima para alterar a posição do slide em relação à posição atual.
Use o slide de dados para um índice de deslizamento bruto na parte inferior do leito do carrossel. Data-slide-to = "2" moverá o controle deslizante para um índice específico, e o índice conta de 0.
A propriedade Data-ride = "carousel" é usada para marcar o carrossel que inicia a reprodução de animação quando a página é carregada.
Através do JavaScript: O carrossel pode ser chamado manualmente através do JavaScript, como mostrado abaixo:
$ ('. Carrossel'). Carrossel ()
4. Opções
Existem algumas opções passadas pelas propriedades de dados ou JavaScript. A tabela a seguir lista estas opções:
V. Método
Aqui estão alguns métodos úteis em plug-ins de carrossel:
Vi. Exemplo
O exemplo a seguir demonstra o uso do método:
<! Doctype html> <html> <head> <title> Instância de bootstrap - método de plug -in de carrossel </itit> <link href = "/bootstrap/css/bootstrap.min.css" rel = "StyleSheet"> <Script Src = "/scripts/jQuy.min.min.min.min.min.min.min.min.min.min. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-carrossel indicador-> <ol> <li data-target = "#mycarousel" data-slide-to "0"> <li> <li <li <li <li <li-Target = "#mycarousel" Data-slide-to "0"> <li> <i> <li <li- li <li) <li data-Target = "#myCarousel" Data-slide-to = "2"> </li> </ol> <!-Projeto de carrossel-> <div> <img src = "/mídia/uploads/2014/07/slide1.png"> </div> <div> <mig src =/07/uplroug <img src = "/mídia/uploads/2014/07/slide3.png"> </div> </div> <!-navegação por carrossel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" slide = "Data"> ‹</a> <a href = "#mycarousel" Data " style = "text-align: Center;"> <input type = "button" value = "start"> <input type = "button" value = "pausa"> <input type = "button" value = "slide anterior"> <input type = "button" buttão "" próximo "> <input Type =" slide "=" slide 1 "> <input" "" </div> </div> <cript> $ (function () {// inicialize carousel $ (". Start-slide"). Clique (function () {$ ("#mycarousel"). carousel ('ciclo');}); // pare o carousel $ (". }); $ (". Próximo lide"). Clique em (function () {$ ("#mycarousel"). Carousel ('Next');}); $ ("#mycarousel"). Carousel (1); }); </script> </body> </html>Os resultados são os seguintes:
Método de plug-in de carrossel
7. eventos
A tabela a seguir lista os eventos a serem usados no plug-in do carrossel. Esses eventos podem ser usados como ganchos nas funções.
Exemplo
O exemplo a seguir demonstra o uso de eventos:
<!DOCTYPE html><html><head> <title>Bootstrap instance- Carousel plug-in event</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Métrica de carrossel-> <ol> <li data-target = "#mycarousel" data-slide-to "0"> </li> <data-twreging = "#mycarousel" Data-slide-to "0"> </li> <li <li <li) <li data-Target = "#myCarousel" Data-slide-to = "2"> </li> </ol> <!-Projeto de carrossel-> <div> <img src = "/mídia/uploads/2014/07/slide1.png"> </div> <div> <mig src =/07/uplroug <img src = "/mídia/uploads/2014/07/slide3.png"> </div> </div> <!-navegação por carrossel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "" $ ('#mycarousel'). on ('slide.bs.carousel', function () {alert ("pisca o evento imediatamente quando o método da instância do slide é chamado.");}); }); </script> </body> </html>Os resultados são os seguintes:
Eventos de plug -in do carrossel
De acordo com o tutorial acima, fiz meu próprio exemplo:
O plug-in do carrossel toca várias imagens grandes do mesmo tamanho em ordem.
// Exemplo básico. <div id = "mycarousel"> <Ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" Data-slide-to = "1"> </li> <li-Target = "#mycarousel"-slide-to = ">" src = "img/slide1.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next" >> </a> </div>
Explicação do atributo de dados:
1.Data-slide aceita a palavra-chave Anterior ou a próxima para alterar a posição do slide em relação à posição atual;
2.Data-slide--para criar um índice de deslizamento original na parte inferior do carrossel. Data-slide-to = "2" moverá o controle deslizante para um índice específico, e o índice conta de 0.
3.Data-ride = "Carousel" Tag User tag Carrossel inicia a reprodução de animação quando a página é carregada.
Se você chamá-lo em JavaScript, use o método do par de valores-chave diretamente e remova os dados;
// Defina propriedades personalizadas
$ ('#mycarousel'). Carousel ({// Defina o intervalo de reprodução automática/2 segundos: 2000, // Defina a pausa do evento: 'Hover', // reproduz apenas uma vez: False,});O plug -in do carrossel também fornece alguns métodos, como segue:
// clique no botão para executar $ ('botão'). On ('clique', function () {// Depois de clicar, $ ('#mycarousel'). Carousel ('ciclo'); // outros semelhantes});evento
$ ('#mycarousel'). on ('slide.bs.carousel', function () {alert ('livre imediatamente quando o modo de instância do slide é chamado');}); $ ('#Mycarousel').Para mais conteúdo, consulte: tutorial de aprendizado de bootstrap
O acima é tudo sobre este artigo. Espero que seja útil que todos aprendam o plug-in de bootstrap carousel.