Gostaria de saber como ficaria os códigos do swiperjs no HTML e JS, se eles estivessem em arquivos especificos, criando o arquivo script.js. | HTML e CSS: responsividade com mobile-first

Olá Daniele! Tudo bem?

Para utilizar o SwiperJS com códigos separados em arquivos específicos, você pode seguir este exemplo:

HTML (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>

JavaScript (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',
    },
});

CSS (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 :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado