Implementando Carousel com o BOOTSTRAP

Hoje iremos ver como se implementar o CAROUSEL utilizando o BOOTSTRAP.

Caso não tenha visto nada sobre BOOTSTRAP, aconselho que veja o nosso ultimo post o BOOTSTRAP clicando aqui.

Utilizando o mesmo projeto do ultimo post, vamos pegar o código fonte do carousel e vamos implementar para ver o que acontece.

No ultimo post o que fizemos foi: linkar tanto o CSS quanto o JS do BOOTSTRAP e adicionar um menu, o NAVBAR.

Até ai tudo bem, mas o que ocorre se tentarmos colocar o CAROUSEL?

Vamos pegar o código fonte no site do BOOTSTRAP e colocar para ver o que ocorre!

Esse é o CAROUSEL:

Se pegamos esse código fonte e colocamos em nosso código HTML, ele irá aparecer. Porém mesmo com as importações de todos os arquivos CSS e JS que vem com o BOOTSTRAP, ele não irá funcionar corretamente. Não terá as transições de imagens funcionando.

A primeira coisa que você deve fazer é adicionar uma imagem para cada item, já que ele não vem com imagem. Feito isso você deverá incluir essas três linhas em seu HEAD:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Feito isso você deverá mudar todos os lugares que tiverem escrito "carousel-exemple-generic" para "myCarousel".

Isso deverá resolver o problema, porém essa solução só irá funcionar enquanto você estiver conectado a internet, no nomento em que você desconectar a solução irá parar de funcionar.

Seu CAROUSEL deverá ficar mais ou menos assim, caso tenha feito os passos do post anterior sobre BOOTSTRAP:

Já o seu código assim:

No meu próximo post irei ensinar como fazer um CAROUSEL do zero, para que não tenha essa solução limitada.

Então até a próxima pessoal.