No exemplo adicionei o nome “slider. css” e coloquei na mesma pasta do nosso HTML. Após esse processo, basta adicionar o código abaixo em nosso site com o link para o CSS no nosso servidor. Devemos inserir também dentro da tag da mesma forma.
Para colocar uma única imagem em uma página da web, usamos o elemento . Isso é um elemento vazio (quer dizer que não possui conteúdo de texto ou tag de fechamento) que requer no mínimo um atributo para ser útil — src (às vezes pronunciado como seu título completo, source).
Para inserir uma imagem no HTML basta utilizar a tag com o atributo src. Ou seja: o atributo src, ou source, vai conter a url da imagem que será inserida.
Estrutura HTML Primeiramente uma DIV como “container” que é onde irá acontecer o carrossel, também utilizaremos outras DIVs que chamaremos de “wall-x” onde x é o valor da DIV no carrossel.
Para fazer um carrossel no Instagram o procedimento é simples. Se estiver utilizando o aplicativo para smartphones, basta clicar no ícone “+” para criar uma nova postagem. Agora, pressione sobre uma imagem ou vídeo da galeria e aparecerá um número no canto superior direito das miniaturas.
O carousel é um slideshow para fazer um giro em vários coteúdos, construído com CSS 3D transforms e um pouco de JavaScript. Ele funciona com o uso de imagens, texto ou marcação personalizada. Também possui suporte para controles anterior, próximo e indicadores.
Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS para “fazer e acontecer”. Não é a toa que o termo “Bootstrap” em inglês significa “inicialização”, algo que possui um ponto de partida..
Para quem está estranhando o termo, um carrossel nada mais é que uma maneira de exibir imagens em um website, onde deixamos uma imagem em destaque e por meio de setas — ou mesmo automaticamente — as imagens vão mudando. É muito usado em sites de notícias e entretenimento.
Qualquer imagem, no Bootstrap 3, pode ficar responsiva quando você adiciona a classe . img-responsive. Essa classe modifica a largura máxima e a altura da imagem – e com isso ela consegue se ajustar ao layout.
Em todos os casos, você deve fornecer um elemento , com src e alt , logo antes do , de outra forma não aparecerá imagens.