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

Setas do carrossel igual do figma- ajuda!

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Variações na página

por Padula
| 44.3k xp | 23 posts
Engenheiro

Alguém sabe porque está ficando desalinhado?

   .carousel{
        --swiper-navigation-size: 2rem;
        --swiper-navigation-sides-offset: 0;
        --swiper-navigation-color: #fff;
        
   }
   .swiper-button-prev,
   .swiper-button-next {
        display: block;
        top: 65%;
        background: var(--cor-linear2);
        padding: 1.5em 1.5em;
        border-radius: 50%;
   }

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

Codigo CSS

.carousel__title {
    padding: 2rem 0 0.8rem 0;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--cor-text-3);
    background-color: var(--cor-bg-2);
    text-align: center;
    text-transform: uppercase;

}

.swiper-slide img {
    width: 100%;
}

.swiper-button-prev,
.swiper-button-next {
    display: none;
}

.swiper-pagination {
    position: initial;
    margin: 1.2rem 0 1.6rem 0;
}

.card {
    margin-top: 2rem;
    /* margin: 2rem 2.4rem 2rem 2.4rem; */
    padding: 1.6rem;
    background-color: var(--cor-bg-2);
    border-radius: 1rem;
    box-shadow: 0 0.4rem 0.4rem 0 var(--cor-shadown);
    /* width: 90vw; */
    width: 38rem;
    height: 29.5rem;
    align-content: center;

    /* font-size: 90rem; */
}

.card-align {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.card__container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.4rem;

}

.card__container__info {
    width: 18rem;

}

.card__container__info__title {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: normal;
    color: var(--cor-text-3);

}

.card__container__info__title-book {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: normal;
    color: var(--cor-text-4);
    margin: 0.8rem 0 0.8rem 0;

}

.card__container__info__text {
    font-size: 1.4rem;
    line-height: normal;

}

.card__btn {
    display: flex;
    justify-content: space-between;

}

.card__btn__list {
    display: flex;
    gap: 1.6rem;
}

.card__container__img {
    width: 16rem;
    height: 16.8rem;
}

.card__btn__link {
    background-color: var(--cor-btn-1);
    color: var(--cor-text-2);
    width: 16rem;
    height: 4.8rem;
    align-content: center;
    text-align: center;
    font-size: 1.6rem;

}

#ckb-like,
#ckb-cart,
#ckb-like-writer,
#ckb-cart-writer {
    display: none;
}

#ckb-like:checked+.lb-like>svg {
    animation: like;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

#ckb-like-writer:checked+.lb-like-writer>svg {
    animation: like-writer;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes like {
    0% {
        fill: transparent;
    }

    100% {
        fill: var(--cor-text-3);
    }
}

@keyframes like-writer {
    0% {
        fill: transparent;
    }

    100% {
        fill: var(--cor-text-3);
    }
}

#ckb-cart:checked+.lb-cart img {
    animation: cart;
    animation-duration: 0.5s;
}

#ckb-cart-writer:checked+.lb-cart-writer img {
    animation: cart-writer;
    animation-duration: 0.5s;
}

@keyframes cart {

    /* 0%{
        content: url('../assets/images/Compras.svg');
    } */
    100% {
        content: url('../assets/images/Compras2.svg');
        content: attr('animationend')
    }

}
@keyframes cart-writer {

    100% {
        content: url('../assets/images/Compras2.svg');
        content: attr('animationend')
    }

}

/* Star */

.avaliation{
    display: flex;
    cursor: pointer;
    color: var(--cor-text-3);
    font-size: 1.6rem;
    height: 1.6rem;
}
.star-icon::before{
    content: "\2605";
}
.star-icon.active ~ .star-icon::before{
    content: "\2606";
}
.avaliation:hover ~ .star-icon::before{
    content: "\2605";
}
.star-icon:hover ~ .star-icon::before {
    content: "\2606";
}
@media screen and (min-width: 1024px){
    .carousel__title{
        font-size: 2.6rem;
        padding: 5.1rem 0 1.6rem 0;
    }
    .swiper {
        /* margin-left: 10%; */
        /* margin-right: 10%; */
        width: 70%;
        padding-top: 3.2rem;
   }

   .swiper-pagination{
    margin-bottom: 7.7rem;
    
   }
   .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
   }
   .carousel{
        --swiper-navigation-size: 2rem;
        --swiper-navigation-sides-offset: 0;
        --swiper-navigation-color: #fff;
        
   }
   .swiper-button-prev,
   .swiper-button-next {
        display: block;
        top: 65%;
        background: var(--cor-linear2);
        padding: 1.5em 1.5em;
        border-radius: 50%;
   }

}
4 respostas
por Padula
| 44.3k xp | 23 posts
Engenheiro

Trecho HTML

<!-- ultimos lançamentos -->
        <section class="carousel">
            <h2 class="carousel__title">ÚLTIMOS LANÇAMENTOS</h2>
            <!-- Slider main container -->
            <div class="swiper">
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="assets/images/ApacheKafka.svg"
                            alt="Livro sobre apache kafka e spring boot"></div>
                    <div class="swiper-slide"><img src="assets/images/Lideranca.svg"
                            alt="Livro sobre liderança em design"></div>
                    <div class="swiper-slide"><img src="assets/images/Javascript.svg"
                            alt="Livro sobre javascript assertivo"></div>
                    <div class="swiper-slide"><img src="assets/images/Guia Front-end.svg" alt="Livro guia front-end">
                    </div>
                    <div class="swiper-slide"><img src="assets/images/Portugol.svg" alt="Livro sobre Portugol"></div>
                    <div class="swiper-slide"><img src="assets/images/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-align">
                <!-- 1º linha -->
                <div class="card">
                    <!-- 1º coluna -->
                    <div class="card__container">
                        <div class="card__container__info">
                            <h3 class="card__container__info__title">Talvez você também se interesse por...</h3>
                            <h2 class="card__container__info__title-book">Angular 11 e Firebase</h2>
                            <p class="card__container__info__text">Construindo uma aplicação integrada com a plataforma
                                do
                                Google.</p>
                        </div>
                        <!-- 2º coluna     -->
                        <img src="assets/images/Angular.svg" class="card__container__img"
                            alt="livro sobre angular e firebase">
                    </div>
                    <!-- 2ª linha -->
                    <div class="card__btn">
                        <!-- 1ª coluna -->
                        <ul class="card__btn__list">
                            <li class="card__btn__list_item">
                                <input type="checkbox" id="ckb-like">
                                <label class="lb-like" for="ckb-like">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M16.5631 26.0582L16.6682 25.9527C19.754 23.1454 22.4188 20.7211 24.3003 18.5122C26.1734 16.3133 27.5 14.0721 27.5 11.6154C27.5 8.15625 24.8663 5.5 21.4063 5.5C19.1681 5.5 16.9632 6.72274 15.8065 8.61209H15.2019C14.0384 6.72577 11.8359 5.5 9.59375 5.5C6.13369 5.5 3.5 8.15625 3.5 11.6154C3.5 14.0721 4.82659 16.3133 6.69967 18.5122C8.5812 20.7211 11.246 23.1454 14.3319 25.9527L14.4369 26.0582L15.5 27.1263L16.5631 26.0582Z"
                                            stroke="#002F52" stroke-width="3" />
                                    </svg>
                                </label>
                            </li>
                            <li class="card__btn__list_item">
                                <input type="checkbox" id="ckb-cart">
                                <label class="lb-cart" for="ckb-cart">
                                    <img src="assets/images/Compras.svg" alt="adicionar carrinho">
                                </label>
                            </li>
                        </ul>
                        <!-- 2ª coluna -->
                        <a class="card__btn__link" href="#">Saiba Mais</a>
                    </div>
                </div>
            </div>

        </section>
solução!
por Eduardo Augusto Martins Pozzi
| 83.2k xp | 43 posts

Boa tarde Padula.

Para fazer parecido com o prtótipo tive que seguir alguns passos.

A primeira coisa é que aquela seta pra frente e pra trás do swipper não fica "dentro" do elemento então quando você estiliza o elemento aquela setá vai estar fora da estilização. Então no css temos que retirar as setas:

    .swiper-button-next::after, .swiper-button-prev::after {
        content: "";
    }

Sem as setas do elemento, vamos colocar os sinais de maior e menor dentro dos elementos para poderem ser estilizados

No index.html, as duas vezes que temos swipper a gente coloca o sinal de "menor que" no da esquerda e "maior que" na direita:

                <div class="swiper-button-prev"><</div>
                <div class="swiper-button-next">></div>

Por algum motivo o fórum está traduzindo os códigos de maior e menor mas no seu html tem que colocar ao invés de:

'<' - coloque '& lt ;' sem os espaços e com o ponto e vírgula mesmo

'>' - coloque '& gt ;' sem os espaços e com o ponto e vírgula também

Agora sim é só estilizar os elementos:

    .swiper-button-prev, .swiper-button-next {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 60%;
        width: 48px;
        height: 48px;
        background: var(--azul-degrade);
        border-radius: 100%;
        color: var(--branco);
        font-size: 24px;
    }

Isso ainda mantem os elementos por cima das imagens dos livros no swiper. E pra deixar eles fora eu achei que seria um trabalho muito grande já que temos que mexes na estilização de outros elementos do swipper e pra mim, como ficou já me deixou bastante satisfeito.

Imagem do swipper com os botões de anterior e próximo estilizados

Espero que funcione!

Abraço

por Mateus Eugênio de Andrade
| 145.3k xp | 10 posts

Muito bom Eduardo! Me ajudou bastante!

Obrigado! Abraços

por Padula
| 44.3k xp | 23 posts
Engenheiro

Eduardo muito obrigado pelo apoio.... valeu mesmo ... não imaginei em remover a seta e colcar outra... ótima sacada.... valeu pelo apoio...

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