Scribd
Carregar
0 visualizações2 páginas

Tutorial HTML Carrossel

O documento apresenta um código HTML, CSS e JavaScript para implementar um carrossel de imagens. O HTML estrutura a página, o CSS estiliza o carrossel e o JavaScript controla a animação das imagens a cada 2 segundos. O carrossel é projetado para ser responsivo e visualmente atraente com efeitos de sombra e transições suaves.

Enviado por

Pablo gacha
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0 visualizações2 páginas

Tutorial HTML Carrossel

O documento apresenta um código HTML, CSS e JavaScript para implementar um carrossel de imagens. O HTML estrutura a página, o CSS estiliza o carrossel e o JavaScript controla a animação das imagens a cada 2 segundos. O carrossel é projetado para ser responsivo e visualmente atraente com efeitos de sombra e transições suaves.

Enviado por

Pablo gacha
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hora de Aventura</title>
<link rel="stylesheet" href="[Link]"> ------> *Link para o CSS funcionar
no HTML*
</head>
<body>
<div class="carrossel"> ------> *Classe feita para modificar o Carrossel*
<div class="container"> ---------> *Classe feita para a Movimentação do
Carrossel*
<img src="./Arquivos/[Link]" alt="">
<img src="./Arquivos/[Link]" alt="">
<img src="./Arquivos/[Link]" alt="">
<img src="./Arquivos/[Link]" alt="">
</div>
</body>
<script src="[Link]"></script> --------> *Link para JavaScript funcionar
no HTML*
</html>

CSS:

* { ---------> *Resetar toda a nossa estrutura que o navegador tem por Padrâo*
padding: 0%;
margin: 0%;
box-sizing: border-box;
}

body { ---------> *Serve para ajeitar o HTML*


display: flex;
align-items: center;
justify-content: center;
margin: 0%;
min-height: 100vh;
background-color: rgb(46, 158, 167);
}

.carrossel { -----------> *Classe criada para adicionar efeitos de


sombra,tamanho e largura das Imagens*
filter: drop-shadow(0px 0px 10px #000);
overflow: hidden;
width: 1100px;
height: 570px;
}

.container { ---------> *Classe feita para a Movimentação do Carrossel*


display: flex;
transition: 0.7s ease-in-out;
transform: translateX(0);
}

img { --------> *Modifica as imagens para terem um tamanho e largura adequados*


margin-top: -100px;
width: 2000px;
height: 730px;
}
JS(JavaScript):

const box = [Link](".container"); -------> *Const Box feita para


manipular o Container*
const img = [Link](".container img") ---------> *Const Img
feita para manipular as imagens do Container*
/
/
/
> *Seleciona mais de um Elemento por vez*

let contador = 0; -------> *Contador feito para a Animação do Carrossel*

function slider() { -------> *Função para a Movimentação do Carrossel*


contador++;

if (contador > [Link] - 1) { --------> *Estrutura de condição para o


Contador voltar ao 0*
contador = 0;
}

[Link] = `translateX(${-contador * 1250}px)` --------> *Feito


para criar a Animação do Carrossel*
}

setInterval(slider, 2000); -------> *intervalo de tempo da Movimentação do


Carrossel sendo a cada 2000(2segundos)*

Você também pode gostar