Este exemplo fornece uma análise abrangente do uso de carrossel no bootstrap para sua referência. O conteúdo específico é o seguinte
Arquivo de código -fonte:
Carousel.scss
Carousel.js
Princípio de implementação:
Ocultar todos os elementos a serem exibidos e especifique que o bloco atual a ser exibido, largura e altura adaptável
Análise de código -fonte:
1. Estrutura HTML: Principalmente dividido em quatro partes
1.1. Contêiner: A divisão mais externa exige que um Data-ride = "Carousel" seja especificado como um plug-in de reprodução de roda e fornece um ID para facilitar a associação do indicador do círculo.
1.2. A parte da lista de fotos é embrulhada com uma divisão externa e, em seguida, cada IMG será embrulhado com uma div e a classe é envolvida pelo item.
1.3. Indicador do círculo: use uma lista OL para exibir seus itens da lista gráfica. Cada item da lista precisa especificar o atributo Slide-to = "índice", que é usado para marcar o número de índice do círculo atual.
1.4. Botões de controle esquerdo e esquerdo: perceba a função de se mover para a esquerda e direita
2. Estilo CSS
2.1. Carrossel: Existe apenas uma marca de posicionamento relativa
2.2. Inner de carrossel: gire a área da lista de imagens, onde cada item tem um item para modificá-lo
2.2.1. Ativo, próximo e previs são considerados visíveis.
2.2.2. Caption de carrossel: significa que cada item deve ter informações de título e a posição padrão é exibida.
2.3. Controle de carrossel: define o estilo dos botões esquerdo e direito, que definirá informações como gradiente e transparência. Ele fornece dois estilos adicionais: ícone-prev e ícone-next.
2.4. Carrossel-indicadores: O estilo de peça do círculo está absolutamente posicionado. Cada LI é definido como um elemento de bloco em linha. Use texto-indent: -999 para ocultar a fonte.
3. Código JS
3.1. O método principal principal é o slide, que percebe a troca de imagens
3.1.1. Quando o interruptor de imagem for executado, o método de pausa será chamado para definir provisoriamente o timer. Somente após a conclusão da chave de imagem, o método do ciclo será chamado para ativar o temporizador.
3.1.2. Aceito dois parâmetros: tipo e próximo
3.1.2.1. Tipo: significa mudar de páginas para cima ou para baixo
3.1.2.2. Próximo: desta vez, ele é exibido como o item ativo. Se não for passado, você precisará usar o método GetItemfordirection para obtê -lo.
3.1.3. Obtenha parâmetros básicos como $ ativo (item atualmente ativo), $ a seguir (item que precisa ser um item ativo), iscycling (alça do timer para carrossel do timer), direção (direção) e outros parâmetros básicos
3.1.4, depois acione o evento Slide.BS.Carousel
3.1.5. Em seguida, defina o item de índice dos indicadores
3.1.6. Mudar de fotos. Se você apoiar a animação CSS, use a animação para alternar. Caso contrário, adicione CSS diretamente para o Switch.
3.1.7. Princípio de troca de animação:
3.1.7.1. Anterior: é um estilo que será combinado rolando a imagem para a direita: ativo direito (item ativo) prev (próximo item). Neste momento, o próprio Anterior é de -100%, coloque a imagem à esquerda
3.1.7.2. Próximo: Role a imagem para a esquerda e a próxima esquerda (próximo item). Neste momento, o próximo em si é 100%, coloque a imagem na extrema direita.
3.1.7.3. Ativo à direita: a imagem deve estar para a direita, para que ela mova 100% da largura da imagem.
3.1.7.4. Esquerda ativa: a imagem está à esquerda, então a largura da imagem deve ser executada -100%
3.1.7.5. Imagem comparativa:
3.1.8. Código de implementação (excluindo CSS3):
.Carousel-Inner> .Active, .Carousel-Inner> .Next, .Carousel-Inner> .Prev {Display: Block;}. Carousel Inner> .Active {esquerda: 0;}. topo: 0; largura: 100%;}. Inner de carrossel> .Next {esquerda: 100%;}. Inner de carrossel> .Prev {esquerda: -100%;}. Carousel-inner> .next.left,. .Active.right {esquerda: 100%;}Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
Maravilhoso compartilhamento de tópicos: jQuery Picture Carousel JavaScript Imagem Carousel Bootstrap Picture Carousel
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.