Bootrastap carousel

326 visualizações

Publicada em

Aprenda a criar um Carousel em Bootstrap do Zero.
Baixe este ebook e assista ao Vídeo Tutorial onde ensino um passo a passo para que você possa criar o seu. Vá até o meu Canal do Youtube e assita o vídeo clicando neste link: https://youtu.be/Anm_a4SQwdQ

Publicada em: Tecnologia
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
326
No SlideShare
0
A partir de incorporações
0
Número de incorporações
192
Ações
Compartilhamentos
0
Downloads
6
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Bootrastap carousel

  1. 1. Bootstrap Carousel Criando um Carousel do Zero Milano www.rodrigomilano.com.br Baixe o código do tutorial aqui
  2. 2. O que é um Carousel O Bootrap Carousel nada mais é do que um “Slider” Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ
  3. 3. Elementos Principais ● Indicators ● Wrapper ● Controls Indicators Wraper ControlsMilano www.rodrigomilano.com.br
  4. 4. Quem são estes elementos? Indicators Wrapper Controls <ol class="carousel-indicators"> <div class="carousel-inner" role="listbox"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ
  5. 5. O que há dentro destes elementos? ● Indicators ● Wrapper ● Controls Baixe o código do tutorial aqui
  6. 6. Indicators Eles são uma “Ordered List” (OL) Lista Ordenada Dentro deles temos os “List Itens” (LI) Itens da Lista “data-target” é o ID do Carousel “data-slide-to” refere-se ao número do slide que é chamado quando se clica no elemento Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ Baixe o código do tutorial aqui
  7. 7. Wrapper É o elemento com a classe “carousel-inner”. Dentro dele vão todos os slides. Todo slide deve ter a classe “item” Dentro de cada slide temos uma imagem. Finalmente, um item não obrigatório é a “carousel-caption” Baixe o código do tutorial aqui
  8. 8. Controls Eles são os elementos “a” ou seja, são links que avançam e retrocedem os slides. Dentro de cada um deles temos um elemento “span” cuja finalidade é criar o ícone das setas à direita e à esquerda. Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ Baixe o código do tutorial aqui
  9. 9. Importante É necessário ter um elemento inicial ativo É obrigatório que você adicione a classe “active” em um dos itens do slide. Caso contrário ele não inicializa Milano www.rodrigomilano.com.br
  10. 10. Tire suas dúvidas Se você tem alguma dúvida, participe do meu grupo de Bootstrap no Facebook https://www.facebook.com/groups/webdesignbootstrap/ Inscreva-se no meu Canal do Youtube https://www.youtube.com/user/fulanotutorial Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ Milano www.rodrigomilano.com.br Baixe o código do tutorial aqui

×