"const" não está sendo reconhecido
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!
Solucionado
"const" não está sendo reconhecido
Oi Vitor, tudo bem?
Você poderia mandar seu código completo aqui e o erro que aparece? Você pode usar a ferramenta de inserir bloco de código </>. Que assim fica mais fácil para testarmos seu código.
Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.
Um abraço e bons estudos.
ok.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraPLus</title>
<link rel="stylesheet" href="reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="cabeçalho">
<div class="container">
<input type="checkbox" id="menu" class="container__botao">
<label for="menu">
<span class="cabeçalho__menu" class="container__imagem" ></span>
</label>
<ul class="lista-menu">
<li class="lista-menu__titulo">Categorias</li>
<li class="lista-menu__item"><a href="a" class="lista-menu__link">Programação</a></li>
<li class="lista-menu__item"><a href="a" class="lista-menu__link">Front-End</a></li>
<li class="lista-menu__item"><a href="a" class="lista-menu__link">Infraestrutura</a></li>
<li class="lista-menu__item"><a href="a" class="lista-menu__link">Business</a></li>
<li class="lista-menu__item"><a href="a" class="lista-menu__link">Desig & UX</a></li>
</ul>
<img src="img/Logo.svg" alt="Logo da AluraPLus" class="container__imagem">
</div>
<div class="container">
<a href="#"><img src="img/Favoritos.svg" alt="Favoritos" class="container__imagem"></a>
<a href="#"><img src="img/Compras.svg" alt="Compras" class="container__imagem"></a>
<a href="#"><img src="img/Usuario.svg" alt="Usuario" class="container__imagem"></a>
</div>
</header>
<section class="banner">
<h2 class="banner__titulo">Já sabe por onde começar?</h2>
<p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
</section>
<section class="carrosel">
<h2 class="carrosel__titulo">Novos lançamentos</h2>
</section>
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro da AluraBooks sobre Apache Kafka e Spring Boot"></div>
<div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro da AluraBooks sobre Javascript Assertivo"></div>
<div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro da AluraBooks sobre Liderança com Desig"></div>
<div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro da AluraBooks sobre NodeJs"></div>
<div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro da AluraBooks sobre Lógica de Programação com Portugol"></div>
<div class="swiper-slide"><img src="img/UX.svg" alt="Livro da AluraBooks sobre UX estratégia"></div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<section>
const swiper = new Swiper('.swiper', {
spaceBetween: 10,
});
</section>
</body>
</html>
Essa é a estrutura do meu HTML, porem o código que foi pedido para eu copiar e colar do Swiper, não esta sendo reconhecido pelo HTML. o código que não esta funcionando...
const swiper = new Swiper('.swiper', { spaceBetween: 10, });
Estou com o mesmo problema no meu...
Acabei de encontarr a resposta em outro post do fórum, a inicialização do carrosel deve estar dentro de uma tag script
<script>
const swiper = new Swiper('.swiper', {
speed: 400,
spaceBetween: 100,
});
</script>