Bootrastap carousel
1 gostou5,789 visualizações
O documento é um guia sobre como criar um carousel usando o Bootstrap, descrevendo seus principais elementos como indicators, wrapper e controls. Explica a estrutura e a função de cada componente e enfatiza a necessidade de um item inicial ativo para o correto funcionamento do carousel. Além disso, oferece links para baixar o código e assistir a tutoriais em vídeo relacionados ao tema.
Bootrastap carousel
- 1. Bootstrap Carousel Criando um Carousel do Zero Milano www.rodrigomilano.com.br Baixe o código do tutorial aqui
- 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. Elementos Principais ● Indicators ● Wrapper ● Controls Indicators Wraper ControlsMilano www.rodrigomilano.com.br
- 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. O que há dentro destes elementos? ● Indicators ● Wrapper ● Controls Baixe o código do tutorial aqui
- 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. 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. 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. 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. 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