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

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