o carrossel não esta girando, ja tentei tudo, reaproveitei as edições do projeto anterior e nada. **abaixo segue meu projeto, fotos e descrições. <section class="carrossel">

erro no carrossel | HTML e CSS: responsividade com mobile-first

3
respostas

por Márcio José da Silva

| 52.8k xp | 14 posts

Supervisor de segurança e acesso.

o carrossel não esta girando, ja tentei tudo, reaproveitei as edições do projeto anterior e nada.

**abaixo segue meu projeto, fotos e descrições.

Mais vendidos

    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre apache kafka e spring boot da alura books"></div>![Insira aqui a descrição dessa imagem para ajudar na acessibilidade](https://cdn1.gnarususercontent.com.br/1/1300914/37685045-f861-4cc5-95aa-498db2324287.jpg)  
        <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em design da alura books"></div>
        <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre javascript assertivo da alurabooks"></div>
        <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
        <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
        <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="livro sobre acessibilidade"></div>
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="card">
    <!-- 1º linha -->
    <div class="card__descrição">
        <!-- 1º coluna -->
        <div class="descrição">
            <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
            <h3 class="descrição__titulo">Autora do mês</h3>
            <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
            <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>


        </div>
        <!-- 2º coluna -->
        <img src="img/escritora.svg" class="descrição__imagem">


    </div>
    <!-- 2º linha -->
    <div class="card__botões">
        <!-- 1º coluna -->
        <ul class="botões">
            <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
            <li class="botões__item"><img src="img/Sacola.svg" alt="Adicionar no carrinho de compras"></li>
        </ul>
        <!-- 2º coluna -->
        <a href="#" class="botões__ancora">Saiba mais</a>
    </div>
</div>

**abaixo segue o script para o carrossel:

3 respostas

por Márcio José da Silva

| 52.8k xp | 14 posts

Supervisor de segurança e acesso.

29/07/2023

a imagem referente ao erro anterior

por Francisco Junior

| 279k xp | 153 posts

Analista MIS Sênior

30/07/2023

Parece que o código contém o script necessário para inicializar o carrossel usando o Swiper. Para que o carrossel funcione corretamente, você precisa incluir o script de inicialização do Swiper após a estrutura HTML do carrossel.

Aqui está o exemplo completo de como você pode inicializar o carrossel usando o Swiper:

Certifique-se de ter incluído as bibliotecas CSS e JS do Swiper em sua página HTML, conforme mostrado no código fornecido.
Adicione o seguinte script de inicialização do Swiper após a estrutura HTML do carrossel:

<!-- Seu código HTML para o carrossel -->
<section class="carrossel">
    <h2 class="carrossel__titulo">Mais vendidos</h2>
    <!-- Slider main container -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre apache kafka e spring boot da alura books"></div>
            <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em design da alura books"></div>
            <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre javascript assertivo da alurabooks"></div>
            <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
            <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
            <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="livro sobre acessibilidade"></div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</section>

<!-- Inclua o script de inicialização do Swiper após a estrutura HTML do carrossel -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
    // Inicializar o carrossel usando Swiper
    const swiper = new Swiper('.swiper', {
        speed: 400,
        spaceBetween: 100,
        // Adicione outras configurações do Swiper aqui, se necessário
    });
</script>

Certifique-se de ter incluído tanto o script do Swiper quanto o script de inicialização após a estrutura HTML do carrossel. Com isso, o carrossel deverá funcionar corretamente, e você poderá interagir com os slides usando os botões de navegação prev/next ou os gestos de arrastar, dependendo da configuração do Swiper que você definir.

por Márcio José da Silva

| 52.8k xp | 14 posts

Supervisor de segurança e acesso.

31/07/2023

eu devo usar dois script/? ou so movimentar o que eu inclui para baixo? porque no projeto completo eu ja inclui o script! da uma olhada, abaixo:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alurabooks</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="styles.css">
</head>

Já sabe por onde começar?

Encontre em nossa estante o que precisa para seu desenvolvimento!>

novos lançamentos

...

</div
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

Talvez você também se interesse por...

Angular 11 e Firebase

Construindo uma aplicação integrada com a plataforma do Google.

saiba mais