Este artigo aprende principalmente o plug -in javascript - carrossel. Sem mais delongas, basta estudar. O tutorial completo pode ser visualizado: Bootstrap 3.0 Tutorial
Carrossel
A seguir, é apresentado um estojo de carrossel feito por este plug-in e componentes relacionados.
<Body> <div id = "carousel-exemplo-generérico" Data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-target = "#carousel-explergenic" Data-slide-to = "0"> </li> <Li Data-Target = "#carousel-expleric-Geric" Slide Data-Target = "#Carousel-Exemplo-Genérico" Data-Slide-to = "2"> </li> </ol> <!-Wrapper for slides-> <div style = "text-align: Center"> <div> <mg>/img> </div> <mg>/img> </Div> <mg> <mg> <mg> </mg> </div> <mg>/img> </Div! href = "#carousel-expler-generic" data-slide = "prev"> <pan> </span> </a> <a href = "#carousel-expleric-genérico" data-slide = "next"> </span-.0 </span> </a> </divrs <script "> js/jQueryin.0.0.0 </a> </div> <script sr" "js/jQuery-2.3..0 </a> </div> <script sr" " src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> // $ ('. carousel'). carousel ('próximo'); </sCript> </body>Internet Explorer 8 e 9 não suporta efeitos de animação de transição
O Bootstrap implementa efeitos de animação com base no CSS3, mas o Internet Explorer 8 e 9 não suporta essas propriedades CSS necessárias. Portanto, os efeitos da animação de transição serão perdidos ao usar os dois navegadores. Além disso, o Bootstrap não pretende usar funções alternativas baseadas em jQuery.
Opções opcionais
Em qualquer .Item, você pode adicionar .Carousel-Caption a cada slide. Você também pode adicionar qualquer código HTML, que será organizado e formatado automaticamente.
<div> <mg>/img> <div> <h4> Primeira etiqueta miniatura </h4> <p> cras justo odio, dapibus acs facilisis in, egestas eget quam. DONEC ID ELIT Non Mi Porta Gravida no Eget Metus. Nullam id dolor id nibh Ultricies vehicula ut id elit. </p> </div> </div>
Adicione três itens e, em seguida, o efeito será classificado.
Questões de acessibilidade
O componente carrossel não é compatível com os padrões de acessibilidade. Se for necessária compatibilidade, considere outras opções para apresentar slides.
Uso através do atributo de dados
O atributo de dados pode controlar facilmente o posicionamento do carrossel. O slide de dados pode aceitar as palavras-chave Antest ou as próximas que controlam a posição de reprodução. Além disso, o subscrito do slide que inicia com 0 também pode ser passado através do slide de dados.
O atributo data ride = "carousel" é usado para marcar o componente carrossel que inicia após o carregamento da página.
Adicione -o no recipiente de carrossel mais externo
<div id = "carousel-expler-genérico" data-ride = "carousel">
via javascript
Inicie manualmente o componente do carrossel (acima, ativamos automaticamente o componente do carrossel usando a propriedade Ride Data-ride.):
$ ('. Carrossel'). Carrossel ()
Opções
As opções podem ser passadas através de propriedades de dados ou JavaScript. Para atributos de dados, você precisa colocar o nome da opção após os dados, por exemplo, Data-interval = "".
método
$ (""). Carrossel (opções)
Inicialize o componente do carrossel, aceite um parâmetro opcional de opção de tipo de objeto e inicie o loop slide.
$ ('. Carrossel'). Carrossel ({intervalo: 2000}).Carousel ('Ciclo') atinge cada quadro da esquerda para a direita.
.Carousel ('Pausa') para o carrossel.
.Carousel (número) posiciona o carrossel no quadro especificado (o subscrito do quadro começa com 0, semelhante a uma matriz).
.Carousel ('prev') retorna ao quadro anterior.
.Carousel ('Next') vá para o próximo quadro.
evento
O componente carrossel da Bootstrap expõe dois eventos para ouvir.
$ ('#carousel-expler-generic').Isso liga os eventos ao componente do carrossel e os executa no tempo de execução correspondente. Isso foi explicado muito nos plug-ins JavaScript anterior, e os formulários são todos gerais, para que você possa usá-los.
foto
Estes são vários plug-ins de carrossel de imagem mais práticos, que têm resultados muito bons. Se usados razoavelmente, eles sempre adicionarão pontos à sua página. Espero que seja útil para o aprendizado de todos.
Se você não estiver satisfeito, pode verificar esses artigos para um estudo aprofundado: o editor do "Bootstrap Learning Tutorial" faz progredir com você!
Se você ainda deseja estudar em profundidade, clique aqui para estudar e anexar dois tópicos interessantes a você:
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.