Bootstrap CarouselCriando um Carousel do Zero

Milanowww.rodrigomilano.com.br

Baixe o código do tutorial aqui

O que é um Carousel

O Bootrap Carousel nada mais é do que um “Slider”

Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ

Elementos Principais

● Indicators● Wrapper ● Controls

Indicators

Wraper

ControlsMilanowww.rodrigomilano.com.br

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

O que há dentro destes elementos?● Indicators● Wrapper ● Controls

Baixe o código do tutorial aqui

IndicatorsEles 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

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

ControlsEles 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

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

Milanowww.rodrigomilano.com.br

Tire suas dúvidas

Se você tem alguma dúvida, participe do meu grupo de Bootstrap no Facebookhttps://www.facebook.com/groups/webdesignbootstrap/

Inscreva-se no meu Canal do Youtubehttps://www.youtube.com/user/fulanotutorial

Assista ao tutorial deste ebook em: https://youtu.be/Anm_a4SQwdQ

Milanowww.rodrigomilano.com.br

Baixe o código do tutorial aqui