Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

[Dúvida] Swiper - Carrosel

Referente ao curso HTML e CSS: responsividade com mobile-first

por Francisco Otacilio Machado
| 80.9k xp | 16 posts

Meu carrossel não ficam 3 imagens na mesma página, o mesmo muda as imagens tudo certo, porém fica apenas uma imagem por página. segue CSS. .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-button-prev, .swiper-button-next { display: none; }

.swiper-pagination { position: initial; margin: 0.5em 0; }

.card__descricao { display: flex; justify-content: space-between; margin-bottom: 0.5em; }

.card__botoes { display: flex; justify-content: space-between; }

.botoes { display: flex; }

.card { background: var(--branco); box-shadow: 0px 4px 4px rgb(0, 0, 0.25); border-radius: 10px; margin: 1em; padding: 1em; }

.descricao__titulo { color: var(--laranja); font-weight: 700; }

.descricao__titulo-livro { color: var(--azul); font-size: 18px; font-weight: 700; margin: 0.5em 0; }

.descricao__texto { font-size: 14px; }

.botoes__item { margin: 0 0.5em; }

.botoes__ancora { background-color: var(--laranja); padding: 1em 2.2em; color: var(--branco); font-weight: 700; text-decoration: none;

e segue html

últimos lançamentos

        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="livro sobre apache kafka e spring boot alura books"></div>
            <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em desing da alura books"></div>
            <div class="swiper-slide"><img src="img/Tuning.svg" alt="Livro sobre Tuning da alura books"></div>
            <div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro sobre Nodejs"></div>
            <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro de programação em Portugol"></div>
            <div class="swiper-slide"><img src="img/Gestão.svg" alt="Livro Sobre gestão da alura books"></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__descricao">
                <!-- 1 coluna -->
                <div class="descricao">
                    <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                </div>
                <!-- 2 coluna -->
                <img src="img/Perfil-escritora 2.svg" class="descricao__imagem">
            </div>

            <!-- 2 linha -->
            <div class="card__botoes">
                <!-- 1 coluna -->
                <ul class="botoes">
                    <li class="botoes__item"><img src="img/Favoritos.svg" alt="Fovoritar livro"></li>
                    <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho"></li>
                </ul>
                <!-- 2 coluna -->
                <a href="#" class="botoes__ancora">Saiba Mais</a>
            </div>

        </div>

    </section>

    ```
    <script>
        const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        slidesPerview:3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    });

`

5 respostas
por Lorena Garcia
| 6858.5k xp | 9957 posts
Alura Scuba Team Monitora

Oi Francisco, tudo bem?

Pra te ajudar melhor, você poderia mandar seu HTML completinho? desde o <!DOCTYPE html> até o finalzinho? Às vezes é um detalhe no comecinho do código.

Você pode usar a opção de inserir bloco de código </> para colar aqui com a formatação certinha.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Um abraço e bons estudos.

solução!
por Nícolas Pastório De Moura
| 118.6k xp | 28 posts

coloca esse estilo que vai funcionar: .swiper-slide{ flex-shrink: 1; }

por Francisco Otacilio Machado
| 80.9k xp | 16 posts

` 

<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburquer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Programação</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Front-End</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Infra-Estrutura</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Business</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Design & UX</a></li>
            </ul>
            <img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>
        <ul  class="opcoes">
            <input type="checkbox" id="opcoes_menu" class="opcoes__botao">
            <label for="opcoes_menu">
            <li class="opcoes__itens">Categoria</li>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Programação</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Front-End</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Infra-Estrutura</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Business</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link"></a>Design & UX</a></li>
            </ul>
            <li class="opcoes__itens"><a href="#" class="opcoes__link">Favoritos</a></li>
            <li class="opcoes__itens"><a href="#" class="opcoes__link"></a>Minha Estante</li>
        </ul>
        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem container__imagem-transparente"></a>
            <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class="container__imagem"></a>
            <a href="#"><img src="img/Usuario.svg" alt="Meu perfil" class="container__imagem"></a>
        </div>
    </header>
por Francisco Otacilio Machado
| 80.9k xp | 16 posts
<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="carrossel">
            <h2 class="carrossel__titulo">últimos lançamentos</h2>
            <!-- Slider main container -->
            <div class="swiper">
            <!-- Additional required wrapper -->       
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="livro sobre apache kafka e spring boot alura books"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em desing da alura books"></div>
                <div class="swiper-slide"><img src="img/Tuning.svg" alt="Livro sobre Tuning da alura books"></div>
                <div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro sobre Nodejs"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro de programação em Portugol"></div>
                <div class="swiper-slide"><img src="img/Gestão.svg" alt="Livro Sobre gestão da alura books"></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__descricao">
                    <!-- 1 coluna -->
                    <div class="descricao">
                        <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                        <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                        <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                    </div>
                    <!-- 2 coluna -->
                    <img src="img/Perfil-escritora 2.svg" class="descricao__imagem">
                </div>

                <!-- 2 linha -->
                <div class="card__botoes">
                    <!-- 1 coluna -->
                    <ul class="botoes">
                        <li class="botoes__item"><img src="img/Favoritos.svg" alt="Fovoritar livro"></li>
                        <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho"></li>
                    </ul>
                    <!-- 2 coluna -->
                    <a href="#" class="botoes__ancora">Saiba Mais</a>
                </div>

            </div>

        </section>
por Francisco Otacilio Machado
| 80.9k xp | 16 posts
       <section class="carrossel">
            <h2 class="carrossel__titulo">Mais vendidos</h2>

            <!-- Slider main container -->
            <div class="swiper">
            <!-- Additional required wrapper -->

            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="./img/ApacheKafka.svg" alt="livro sobre apache kafka e spring boot alura books"></div>
                <div class="swiper-slide"><img src="./img/Liderança.svg" alt="Livro sobre liderança em desing da alura books"></div>
                <div class="swiper-slide"><img src="./img/Tuning.svg" alt="Livro sobre Tuning da alura books"></div>
                <div class="swiper-slide"><img src="./img/Nodejs.svg" alt="Livro sobre Nodejs"></div>
                <div class="swiper-slide"><img src="./img/Portugol.svg" alt="Livro de programação em Portugol"></div>
                <div class="swiper-slide"><img src="./img/Gestão.svg" alt="Livro Sobre gestão da alura books"></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__descricao">
                    <!-- 1 coluna -->
                    <div class="descricao">
                        <img src="img/Star 1.svg" alt="Avaliação 5 Estrelas">
                        <h3 class="descricao__titulo">Autora do Mês</h3>
                        <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
                        <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>
                    </div>
                    <!-- 2 coluna -->
                    <img src="img/Perfil-escritora 1.svg" class="descricao__imagem">
                </div>

                <!-- 2 linha -->
                <div class="card__botoes">
                    <!-- 1 coluna -->
                    <ul class="botoes">
                        <li class="botoes__item"><img src="img/Favoritos.svg" alt="Fovoritar livro"></li>
                        <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho"></li>
                    </ul>
                    <!-- 2 coluna -->
                    <a href="#" class="botoes__ancora">Saiba Mais</a>
                </div>
            </div>
        </section>
        <section class="topicos">
            <h2 class="topicos__titulo">tópicos visitados recentemente</h2>
            <ul class="topicos__lista">
                <li class="topicos__item">
                    <a href="#" class="topicos__link">Android</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">Marketing Digital</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">Agile</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">Startups</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">HTML & CSS</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">Python</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">OO</a>
                </li>
                <li class="topicos__item">
                    <a href="#" class="topicos__link">Java</a>
                </li>
            </ul>
        </section>
        <section class="contato">
            <div class="contato__descricao">
                <h2 class="contato__titulo">Fique por dentro das novidades</h2>
                <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
            </div>
            <input type="email" placeholder="cadastre seu e-mail" class="contato__email">
        </section>

        <hr/>

        <footer class="rodape">
            <h2 class="rodape__titulo">Grupo Alura</h2>
        </footer>

        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <script>
            const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerview:3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
        });
        </script>
    </body>
</html>

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software