O Bootstrap é uma estrutura front-end para o rápido desenvolvimento de aplicativos e sites da Web. O Bootstrap é baseado em HTML, CSS e JavaScript.
Caso
A seguir, é apresentado um estojo de carrossel feito por este plug-in e componentes relacionados.
<div id = "Carousel-Exemplo-Genérico" Data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-target = "#carousel-expleric-genérico" Data-slide-to = "0"> </li> <li data-taarget = "#carousel-expleric" Data-slide-to = " Data-Target = "#Carousel-Exemplo-Genérico" Data-Slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div> <div> <img src = "..."> <div> ... </div> </div> ... </div> <!-Controls-> <a href =#carous Data-slide = "prev"> <pan> </span> </a> <a href = "#carousel-expler-generic" data-slide = "next"> <pan> </span> </a> </div>
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, não pretendemos usar a implementação baseada em jQuery de funções alternativas.
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.
900x500
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
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.
via javascript
Inicie manualmente o componente do carrossel:
A cópia do código é a seguinte:
$ ('. 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 = "".
Nome Tipo Valor padrão descreve o tempo de espera para o número de intervalo 5000 rotação do slide. Se falso, o carrossel não iniciará o loop automaticamente. Pausa a corda "Passe o mouse" O mouse permanece na área de slides e faz uma pausa no carrossel, e o mouse deixa o carrossel. Enrole booleano verdadeiro se o carrossel continua a fazer um loop.
método
.Carousel (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')Ciclo cada quadro da esquerda para a direita.
.Carousel ('pausa')
Pare o carrossel.
.Carousel (número)
Posicione o carrossel no quadro especificado (o subscrito do quadro começa com 0, semelhante a uma matriz).
.Carousel ('prev')
Retornar ao quadro anterior.
.Carousel ('Next')
Vá para o próximo quadro.
evento
O componente carrossel da Bootstrap expõe dois eventos para ouvir.
| Tipo de evento | descrever |
|---|---|
| slide.bs.carousel | Este evento começa imediatamente após slide . |
| slid.bs.carousel | É acionado quando todas as apresentações de slides são reproduzidas. |
$ ('#mycarousel').O exposto acima é a explicação detalhada do caso de efeito de bootstrap carousel com base no plug-in JS introduzido pelo editor. Espero que possa ajudá -lo!