Professora, poderia esclarecer-me o motivo de colocar o código HTML no script do JS?
Sei que existe outras formas menos complexas do que essa para estabelecer um carrossel que funciona.
EX:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
<style>
body {
margin: 0;
background: #000;
}
.carrossel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.slides {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s ease-in-out;
}
.slide {
min-width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
/* Botões */
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.4);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 2rem;
z-index: 10;
}
.btn.prev { left: 10px; }
.btn.next { right: 10px; }
</style>
</head>
<body>
<div class="carrossel">
<button class="btn prev">❮</button>
<div class="slides">
<div class="slide" style="background-image: url('https://picsum.photos/id/1015/1920/1080');"></div>
<div class="slide" style="background-image: url('https://picsum.photos/id/1016/1920/1080');"></div>
<div class="slide" style="background-image: url('https://picsum.photos/id/1018/1920/1080');"></div>
</div>
<button class="btn next">❯</button>
</div>
<script>
const slides = document.querySelector('.slides');
const totalSlides = document.querySelectorAll('.slide').length;
let index = 0;
function mostrarSlide(n) {
index = (n + totalSlides) % totalSlides;
slides.style.transform = `translateX(${-index * 100}%)`;
}
document.querySelector('.prev').addEventListener('click', () => {
mostrarSlide(index - 1);
});
document.querySelector('.next').addEventListener('click', () => {
mostrarSlide(index + 1);
});
// Movimento automático a cada 4 segundos
setInterval(() => {
mostrarSlide(index + 1);
}, 4000);
</script>
</body>
</html>
Gostaria de saber o porquê complicar a construção do código, sendo que ela pode ser mais simples e mais didática de aprender, fora que não entedi o motivo de ser feito no JS.
Existe uma renderização melhor ou é mais semantico para o mecânismo de busca do google e afins ?
