Eu queria criar um carrosel de imagens, onde quando eu passo pro lado a imagen do carrosel, altera tambem a imagem do fundo, de acordo com a imagem que esta no carrosel. Como eu faria essa ligação entre meu carrosel de imagens e meu background??
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu queria criar um carrosel de imagens, onde quando eu passo pro lado a imagen do carrosel, altera tambem a imagem do fundo, de acordo com a imagem que esta no carrosel. Como eu faria essa ligação entre meu carrosel de imagens e meu background??
Boa tarde Victor! Tudo certo?
Não sei se é isso que você precisa, mas vamos lá! Para criar um carrossel de imagens que também altera o fundo de acordo com a imagem do carrossel, você pode seguir os passos abaixo:
div para o carrossel e adicione as imagens dentro desse elemento, usando as tags img.div para representar o fundo que será alterado.<div class="carrossel">
<img src="imagem1.jpg" alt="Imagem 1">
<img src="imagem2.jpg" alt="Imagem 2">
<img src="imagem3.jpg" alt="Imagem 3">
</div>
<div class="fundo"></div>
.carrossel {
display: flex;
overflow: hidden;
}
.carrossel img {
width: 100%;
height: auto;
transition: transform 0.3s ease-in-out;
}
.fundo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("imagem1.jpg"); /* Defina a imagem de referência aqui */
background-size: cover;
background-position: center;
z-index: -1;
}
const carrossel = document.querySelector(".carrossel");
const fundo = document.querySelector(".fundo");
const imagens = carrossel.querySelectorAll("img");
imagens.forEach((imagem) => {
imagem.addEventListener("click", () => {
fundo.style.backgroundImage = `url(${imagem.src})`;
});
});
Com esses passos, o carrossel de imagens será criado e, quando o usuário clicar em uma imagem do carrossel, a imagem de fundo será atualizada com a imagem correspondente. Você pode personalizar o CSS e adicionar mais imagens ao carrossel conforme necessário.
Lembre-se de substituir as URLs das imagens pelas URLs das suas próprias imagens no código HTML e CSS. Além disso, ajuste o CSS conforme necessário para posicionar o carrossel e o fundo no local desejado na sua página.
Atenciosamente.