Que necessitamos?
para. Embora para trabalhar com arquivos .html não necessitemos de um servidor local instalado, recomendo instalar um para ter todos os nossos arquivos organizados em um diretório e poder trabalhar com mais conforto se posteriormente quisermos adicionar código PHP, neste caso eu usará o servidor Xampp, você pode fazer o download em https: //www.apachefr… g / es / index.html
b. Como vamos fazer um slide, vamos precisar das imagens que vamos colocar nele, elas devem ter exatamente o mesmo tamanho em pixels, vou usar algumas com o tamanho de 1200 X 600.
c. Um editor de código de sua escolha, neste caso irei usar um chamado "Colchetes".
Vamos começar …
1. Uma vez que instalamos o Xampp, vamos para o diretório "C: / xampp / htdocs" e criamos uma nova pasta, neste caso a chamarei "SliderShow_main", dentro dela vou criar outra pasta e chamá-la "Imagens", aí colocarei as imagens que usarei na apresentação de slides.
Clique na imagem para ampliá-la
2. Agora vamos abrir nosso editor de código, vamos ao menu "Arquivo> Novo".
Clique na imagem para ampliá-la
E neste novo arquivo vamos escrever o código HTML básico.
Clique na imagem para ampliá-la
Salvaremos este arquivo com a extensão (.html) dentro da pasta que criamos na etapa 1 "SliderShow_main".3. Posteriormente, adicionaremos um título para o arquivo e as referências aos arquivos Bootstrap e jquery que precisaremos para que nosso controle deslizante funcione corretamente, temos duas opções, podemos baixar esses arquivos e colocá-los em pastas em nosso site dentro do servidor local ou podemos adicioná-los da web, o que nos pouparia espaço em nosso servidor. Vou escolher a segunda opção, vocês vão ver como fazer na próxima imagem …
Clique na imagem para ampliá-la
4. Mais tarde, adicionaremos dentro dos doisao qual atribuiremos as classes "container" e "col-md-12" respectivamente da seguinte maneira …
PROLONGAR
Clique na imagem para ampliá-la
Estes doisque adicionarmos servirá para que nosso controle deslizante seja mostrado acima de todo o espaço disponível em nossa tela.5. Agora que preparamos nosso código, vamos começar a adicionar os elementos que irão compor o slide, vamos ver …
Clique na imagem para ampliá-la
Como você pode ver, adicionamos um novoque chamamos de "carrossel_1" e atribuímos 2 classes de bootstrap chamadas "carrossel" e "slide", note que ambas são separadas por um espaço, adicionalmente para que o slide funcione é necessário adicionar o atributo (passeio de dados = "carrossel").6. Dentro da camada anterior adicionaremos uma lista ordenada com a classe "indicadores-carrossel" que nos ajudará a adicionar a quantidade de indicadores correspondentes às nossas imagens, neste caso usaremos três imagens então teremos três indicadores a partir do "0".
Clique na imagem para ampliá-la
Observe que o7. Agora vamos adicionar os itens com as imagens que vão sendo mostradas, vamos ver o código no qual você vai encontrar mais detalhes …
PROLONGAR
Clique na imagem para ampliá-la
Depois de ter escrito tudo o que está associado ao primeiro item, basta copiar e colar de acordo com a quantidade de item que precisamos, levando em consideração que devemos alterar o caminho da imagem e que os demais itens não devem conter a classe "ativa" .
PROLONGAR
Clique na imagem para ampliá-la
Como você pode ver, já adicionamos os 3 itens com nossas 3 imagens e nosso código é funcional, mas agora adicionaremos elementos de controle (Anterior e Próximo) para mover para frente e para trás entre nossas imagens e também adicionaremos alguns ícones. Deixando nosso código final da seguinte maneira …
PROLONGAR
Clique na imagem para ampliá-la
Se seguirmos os passos corretamente, em nosso navegador podemos ver os seguintes resultados …
PROLONGAR
Clique na imagem para ampliá-la
Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
Este tutorial ajudou você?
Se nãoAJUDE A MELHORAR ESTE TUTORIAL!
Você acha que pode corrigir ou melhorar este tutorial? Você pode enviar sua Edição com as alterações que considerar úteis.0 usuários editaram este tutorial. Edite e torne-se um especialista reconhecido!
Edite este tutorial
TUTORIAIS SEMELHANTES
Propriedades e atributos de formulários HTML5HTML5 e CSS3: atributos de relacionamento e CSS3Primeiras etapas de HTML5 e CSS3: elementos comuns em design da WebModelo de receita com HTML5 e CSS3HTML5 e CSS3: primeiras etapasCrie um cartão do Twitter para usuários usando HTML5 e CSS3Barra horizontal com efeito de foco em html5, css3 e bootstrapObtenha as coordenadas do cliente com a API do Google Maps em JavaScript (HMTL5, CSS3 e Bootstrap)
18 comentários
Juan Carlos
25 de agosto de 2015 11:08
Para não lhe dar um ponto positivo. Ótimo tutorial, você vai fazer mais Ronny ???
obrigado pelo seu tutorial.
- Relatório
Nestor1
25 de agosto de 2015 11h34
Também adorei o tutorial, obrigado Ronny, só uma dúvida: Você tem um arquivo zip para pegar o exemplo do código? Seria ótimo se você tivesse vontade. Obrigada!!
- Relatório
Alexander Teba
25 de agosto de 2015 16:26
Ótimo efeito. Estou analisando isso.
Eu concordo com o que os outros falam, se você tivesse um arquivo com o código para testar seria ótimo.
Obrigada
- Relatório
Ronny Bonillo
25 de agosto de 2015 16:54
Bom dia amigos, obrigado pelo apoio, é ótimo que tenham gostado porque este é um dos meus 3 primeiros tutoriais no site e realmente não esperava respostas positivas tão rapidamente, em relação à sua pergunta Juan Carlos, claro que irei. aqui por um tempo postando novos tutoriais todas as semanas, espero que gostem deles e que me apoiem com seus comentários e avaliações … Saudações da Venezuela …
- Relatório
Ronny Bonillo
25 de agosto de 2015 16:58
De nada Nestor1, obrigado por comentar! Quanto à sua dúvida, recomendo que volte logo, pois nas próximas horas o conteúdo deste tutorial será atualizado adicionando um .zip no final para que você possa baixar o código.
- Relatório
Eneko
25 de agosto de 2015 17:06
De nada Nestor1, obrigado por comentar! Quanto à sua dúvida, recomendo que volte logo, pois nas próximas horas o conteúdo deste tutorial será atualizado adicionando um .zip no final para que você possa baixar o código.
Estarei atento também, o efeito é espetacular e é incrível. desde já, obrigado.
- Relatório
Ronny Bonillo
25 de agosto de 2015 17:07
De nada Eneko …
- Relatório
Alexander Teba
25 de agosto de 2015 17:13
Bom dia amigos, obrigado pelo apoio, é ótimo que tenham gostado porque este é um dos meus 3 primeiros tutoriais no site e realmente não esperava respostas positivas tão rapidamente, em relação à sua pergunta Juan Carlos, claro que irei. aqui por um tempo postando novos tutoriais toda semana espero que gostem deles e que me apoiem com seus comentários e avaliações … Saudações da Venezuela …
Que rápido!!
Obrigado Ronny, você não sabe como é bom para mim ter compartilhado o código.
Muito obrigado desenvolvedor!
ps: eu te sigo.
- Relatório
Ronny Bonillo
25 de agosto de 2015 17:19
de nada alejandro, obrigado pelo apoio!
- Relatório
Nestor1
25 de agosto de 2015 17:25
De nada Nestor1, obrigado por comentar! Quanto à sua dúvida, recomendo que volte logo, pois nas próximas horas o conteúdo deste tutorial será atualizado adicionando um .zip no final para que você possa baixar o código.
Muito obrigado por anexar o arquivo Ronny. E bem-vindo ao Solvetic.
- Relatório
Carlos Sanz
02 de setembro de 2015 16:14
Estou testando, obrigado por colocar Ronny.
- Relatório
Ronny Bonillo
02 de setembro de 2015 21:43
de nada carlos
- Relatório
Fiore nella
08 de setembro de 2015 16:25
Obrigado pelo anexo !! muito legal.
- Relatório
Ronny Bonillo
08 de setembro de 2015 16:37
De nada Fiore 
- Relatório
Reneé Toapanta García
02 de junho de 2016 21:58
Bom dia, o tema é muito elegante mas não consigo baixar, ele me pede repetidamente para me identificar e não me deixa sair daí. Se você pudesse me ajudar, agradeço um milhão.
- Relatório
Julio Martinez
Jul 262021-2022 20:03
Não vejo o arquivo .zip para ver o código
- Relatório
aldo1982
Jul 292021-2022 05:22
muito bom, mas não vejo o .zip para baixar o codego.
Slds
- Relatório
Manelly
Set 132021-2022 12:58
Bom…
Super explicação e apresentação Ronny Igual aos últimos comentadores … Onde está o link para baixar o código?
Obrigado e cumprimentos,
Nelly.
- Relatório
- Criar uma contaCadastre-se GRATUITAMENTE para ter sua conta SolveticRegistre uma conta
- IdentificarVocê já tem uma conta? Cadastre-se aquiIdentifique-me em minha conta
