Gostaria de saber como ficaria os códigos do swiperjs no HTML e JS, se eles estivessem em arquivos específicos, criando o arquivo script.js.
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
Gostaria de saber como ficaria os códigos do swiperjs no HTML e JS, se eles estivessem em arquivos específicos, criando o arquivo script.js.
Olá Daniele! Tudo bem?
Para utilizar o SwiperJS com códigos separados em arquivos específicos, você pode seguir este exemplo:
index.html): Certifique-se de incluir as referências ao CSS e ao JavaScript do SwiperJS no seu arquivo HTML, além de adicionar a estrutura básica do carrossel.<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrossel com SwiperJS</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="carrossel">
<h2 class="carrossel__titulo">Novos lançamentos</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js): Aqui você inicializa o SwiperJS. Este arquivo será responsável por configurar o carrossel.const swiper = new Swiper('.swiper', {
slidesPerView: 3,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
styles.css): Estilize o carrossel conforme necessário. Você pode adicionar estilos específicos para o título e o carrossel..carrossel__titulo {
color: var(--laranja);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 0.5em 0;
}
.swiper-slide img {
width: 100%;
}
.swiper-pagination {
position: initial;
margin: .5em 0;
}
Com essa estrutura, você separa suas responsabilidades: o HTML para a estrutura, o CSS para o estilo e o JavaScript para a funcionalidade. Isso facilita a manutenção e a organização do seu projeto.
Espero ter ajudado a esclarecer a dúvida. Conte sempre com o apoio do fórum!
Abraços e bons estudos :)