Boa tarde; Mesmo refazendo a aula não consegui identificar o porque minhas setas do carrossel não aparecem. Segue código:
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/1Arquitetura.svg" alt="Livro sobre Arquitetura da Alura Books"></div>
<div class="swiper-slide"><img src="img/2Nodejs.svg" alt="Livro sobre Nodejs da Alura Books"></div>
<div class="swiper-slide"><img src="img/3Portugol.svg" alt="Livro sobre Portugol da Alura Books"></div>
<div class="swiper-slide"><img src="img/4ApacheKafka (1).svg" alt="Livro sobre Apache Kafka da Alura Books"></div>
<div class="swiper-slide"><img src="img/5Mean.svg" alt="Livro sobre Mean da Alura Books"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
.carrossel__titulo{
background-color: var(--branco);
color:var(--laranja);
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 18px;
padding: 1em 1em 1em 1em;
}
.swiper-slide img{
width: 100%;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-pagination{
position: initial;
margin: 0.5em 0;
}
.card__descrição{
display: flex;
justify-content: space-between;
}
.card__botões{
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.botões{
display: flex;
}
.card{
background: var(--branco);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
}
.descrição__titulo{
color: var(--laranja);
font-weight: 700;
}
.descrição__titulo-livro{
color:var(--azul);
font-size: 18px;
font-weight: 700;
margin: 0.5em 0;
}
.descrição__texto{
font-size: 14px;
}
.botões__item{
margin: 0 0.5em;
}
.botões__ancora{
background-color: var(--laranja);
font-weight: 700;
color:rgba(255, 255, 255, 1);
padding: 1em 2.2em;
text-decoration: none;
}
@media screen and (min-width: 1024px) {
.carrossel__titulo {
font-size: 26px;
}
.swiper-pagination {
margin: 2em 0 3em 0;
}
.swiper {
width: 60%;
}
.swiper-button-prev,
.swiper-button-next {
display: block;
}
}
Obrigada.